Vue第三方庫axios

以前使用的是vue-resource，現在推薦使用vue-axios

1.axios的使用：https://github.com/axios/axios 很詳細

2.下載axios

npm install axios --save

3.下載postman(測試後臺接口)：https://www.postman.com/downloads/

4.可以單獨配置axios，也可以全局配置axios

4.1.單獨配置axios

引入

import axios from "axios"

寫法一：axios官網方法：POST

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

寫法二：axios官網方法：GET

// GET request for remote image in node.js
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

寫法三： 

onSubmit(){
 const formData={
  userName:this.userName,
  password:this.password
 }
 
 axios.post("請求地址",請求頭,formData)
  .then(response=>{
  
  },error=>{

  })

}

4.2.全局配置axios

4.2.1. 新建utils文件夾下的api.js文件

import axios from "axios"

const api=axios.create({
 baseURL:"http://sandbox_api"

})
api.defaults.headers.post["Content-Type"]="application/json"
api.interceptors.response.use(response=>{
  return response.data.data;
  },error=>{
   const data=error.response;
   alert(data.data.errorMessage);
  })
export {api}

4.2.2.在需要axios去請求數據的組件中使用

<template>
<div>
<input type="text" v-model="name">
<input type="password" v-model="password">
</div>
</template>
<script>
import {api} from "../utils/api" //{api}是因爲不是default去暴露

data(){
  return{
   form:{
      name:"",
      password:""
    }
  }
},

methods:{
  submit(){
   api.post("/auth/login",this.form).then(res=>{
  
   },
   err=>{
    
   });
 }
}

</script>

4.2.3.我們用alert來彈框不是很好，所以我們用ant組件庫

在main.js中引入

import Notification from "ant-design-vue/lib/notification"
Vue.$notification=Notification

import axios from "axios"
import Vue from "vue"

const api=axios.create({
 baseURL:"http://sandbox_api"

})
api.defaults.headers.post["Content-Type"]="application/json"
api.interceptors.response.use(response=>{
  return response.data.data;
  },error=>{
   const data=error.response;
   //alert(data.data.errorMessage);
   Vue.$notification.error({
       ......
    })
  })
export {api}