Vue中axios的使用技巧配置項詳解

使用axios首先要下載axios模塊包

npm install axios --save

其次須要在使用的文件中引入

import axios from 'axios'

1、調用axios常見兩種方法(此處使用easy-mock模擬數據接口)：

//方法1
      axios({
        method: 'post',
        url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
      })
      .then((response)=>{
          console.log(response.data)
      })
      .catch((error)=>{
          console.log(error)
      })

//方法2
    axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
      miaov:"課堂"  //發送的數據
    })
      .then((response)=>{
        console.log(response.data)
      })
      .catch((error)=>{
        console.log(error)
      })

注意：

方法一中向後臺發送數據時：

//get方式發送數據
            axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
                params: {
                    pomelo: 'tt',
                    test: 'test'
                }
            }).then((response) => {
                console.log(response)
            }).catch((error) => {
                console.log(error)
            })
//post方式發送數據
           axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', {
                pomelo: 'tt',
                test: 'test'
            }).then((response) => {
                console.log(response)
            }).catch((error) => {
                console.log(error)
            })

2、自定義請求實例

//常見請求實例配置項
{
     baseURL： ‘’，  //基礎URL
     timeout：1000，  //請求延時時間
     headers {'X-Requested-With': 'XMLHttpRequest'},   //自定義請求頭內容
     responseType: 'json',  //請求數據類型包括  'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
     params: {},  //不管請求爲什麼種類型，在params中的屬性都會以key=value的格式在urlzhong拼接
     transformRequest: [function(data){
         return data
     }],   // 只適用於 POST,PUT,PATCH，transformRequest` 容許在向服務器發送前，修改請求數據。後面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 Stream
     transformResponse: [function(data){
         return data
     }],   //transformResponse` 在傳遞給 then/catch 前，容許修改響應數據
     validateStatus: function(status){
     　　return status < 400 //狀態碼小於400時均爲成功（返回true）
     }, //validateStatus` 定義對於給定的HTTP 響應狀態碼是 resolve 或 reject  promise 。若是 `validateStatus` 返回 `true` (或者設置爲 `null` 或 `undefined`)，promise 將被 resolve; 不然，promise 將被 rejecte
     cancelToken  //取消請求，下文詳細說明
}

使用自定義請求實例時須要先建立對象

var HTTP = axios.create({})   // {}中放入上文中的配置項

使用transformRequest將數據格式改成key=value的格式

import queryString from 'queryString'  //轉換格式包，無需下載


  var HTTP = axios.create({
    baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
    timeout: 1000,
    responseType:'json',
    headers:{
      'custome-header': 'miaov',
      'content-type':'application/x-www-form-urlencoded'   //轉換爲key=value的格式必須增長content-type
    },
    transformRequest:[function(data){
        console.log(data)
      data.age = 30;  //發送以前增長的屬性
      return queryString.stringify(data);    //利用對應方法轉換格式
    }]
  })

axios併發請求，經過axios。all()方法，需在兩個請求都完成後才能被成功調用

export default {
  name: 'hello',
  created(){

    function http1(){
      return HTTP.get("test-axios")
    }

    function http2(){
      return HTTP.post("test-post-axios")
    }
   //注意此時常使用axios.spread()方法接收多個響應數據
      axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{
          console.log(res1)
          console.log(res2)
      }))
      .catch((error) =>{
        if (axios.isCancel(error)) {
          console.log(error.message);
        }else{
            console.log(error)
        }
    })

  }
}

axios攔截器

（1）攔截請求（在發送請求以前作某事）

axios.interceptors.request.use(function(config){
    //在發送請求以前作某事
    console.log("攔截")
    console.log(config)  //單次請求的配置信息對象
    return config;  //只有return config後，才能成功發送請求
  },function(error){
    //請求錯誤時作些事
    return Promise.reject(error);
  });

（2）攔截響應

HTTP.interceptors.response.use(function(data){
      console.log("response")
      console.log(data)  //響應數據
      return data;   //只有return data後才能完成響應
  })

當大量使用axios時，能夠將axios做爲vue的插件全局使用

首先須要安裝axios，vue-axios

npm install axios vue-axios --save

將其做爲插件

Vue.use(VueAxios, Axios)   //注意順序與大小寫

當在其餘任意組件中使用時可以使用如下方式：

this.$http[method]()