Vue---axios配置

1.GET 請求

//向具備指定ID的用戶發出請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
 
// 也能夠經過 params 對象傳遞參數
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

2.POST請求

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

3執行多個併發請求

function getUserAccount() {
return axios.get('/user/12345');
}
 
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//兩個請求現已完成
}));

4.請求配置
這些是用於發出請求的可用配置選項。 只有url是必需的。 若是未指定方法，請求將默認爲GET.

{
    // `url`是將用於請求的服務器URL
    url: '/user',
     
    // `method`是發出請求時使用的請求方法
    method: 'get', // 默認
     
    // `baseURL`將被添加到`url`前面，除非`url`是絕對的。
    // 能夠方便地爲 axios 的實例設置`baseURL`，以便將相對 URL 傳遞給該實例的方法。
    baseURL: 'https://some-domain.com/api/',
     
    // `transformRequest`容許在請求數據發送到服務器以前對其進行更改
    // 這隻適用於請求方法'PUT'，'POST'和'PATCH'
    // 數組中的最後一個函數必須返回一個字符串，一個 ArrayBuffer或一個 Stream
     
    transformRequest: [function (data) {
    // 作任何你想要的數據轉換
     
    return data;
    }],
     
    // `transformResponse`容許在 then / catch以前對響應數據進行更改
    transformResponse: [function (data) {
    // Do whatever you want to transform the data
     
    return data;
    }],
     
    // `headers`是要發送的自定義 headers
    headers: {'X-Requested-With': 'XMLHttpRequest'},
     
    // `params`是要與請求一塊兒發送的URL參數
    // 必須是純對象或URLSearchParams對象
    params: {
    ID: 12345
    },
     
    // `paramsSerializer`是一個可選的函數，負責序列化`params`
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
     
    // `data`是要做爲請求主體發送的數據
    // 僅適用於請求方法「PUT」，「POST」和「PATCH」
    // 當沒有設置`transformRequest`時，必須是如下類型之一：
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - Browser only: FormData, File, Blob
    // - Node only: Stream
    data: {
    firstName: 'Fred'
    },
     
    // `timeout`指定請求超時以前的毫秒數。
    // 若是請求的時間超過'timeout'，請求將被停止。
    timeout: 1000,
     
    // `withCredentials`指示是否跨站點訪問控制請求
    // should be made using credentials
    withCredentials: false, // default
     
    // `adapter'容許自定義處理請求，這使得測試更容易。
    // 返回一個promise並提供一個有效的響應（參見[response docs]（＃response-api））
    adapter: function (config) {
    /* ... */
    },
     
    // `auth'表示應該使用 HTTP 基本認證，並提供憑據。
    // 這將設置一個`Authorization'頭，覆蓋任何現有的`Authorization'自定義頭，使用`headers`設置。
    auth: {
    username: 'janedoe',
    password: 's00pers3cret'
    },
     
    // 「responseType」表示服務器將響應的數據類型
    // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    responseType: 'json', // default
     
    //`xsrfCookieName`是要用做 xsrf 令牌的值的cookie的名稱
    xsrfCookieName: 'XSRF-TOKEN', // default
     
    // `xsrfHeaderName`是攜帶xsrf令牌值的http頭的名稱
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
     
    // `onUploadProgress`容許處理上傳的進度事件
    onUploadProgress: function (progressEvent) {
    // 使用本地 progress 事件作任何你想要作的
    },
     
    // `onDownloadProgress`容許處理下載的進度事件
    onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
    },
     
    // `maxContentLength`定義容許的http響應內容的最大大小
    maxContentLength: 2000,
     
    // `validateStatus`定義是否解析或拒絕給定的promise
    // HTTP響應狀態碼。若是`validateStatus`返回`true`（或被設置爲`null` promise將被解析;不然，promise將被
      // 拒絕。
    validateStatus: function (status) {
    return status >= 200 && status < 300; // default
    },
     
    // `maxRedirects`定義在node.js中要遵循的重定向的最大數量。
    // 若是設置爲0，則不會遵循重定向。
    maxRedirects: 5, // 默認
     
    // `httpAgent`和`httpsAgent`用於定義在node.js中分別執行http和https請求時使用的自定義代理。
    // 容許配置相似`keepAlive`的選項，
    // 默認狀況下不啓用。
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),
     
    // 'proxy'定義代理服務器的主機名和端口
    // `auth`表示HTTP Basic auth應該用於鏈接到代理，並提供credentials。
    // 這將設置一個`Proxy-Authorization` header，覆蓋任何使用`headers`設置的現有的`Proxy-Authorization` 自定義 headers。
    proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
    username: 'mikeymike',
    password: 'rapunz3l'
    }
    },
     
    // 「cancelToken」指定可用於取消請求的取消令牌
    // (see Cancellation section below for details)
    cancelToken: new CancelToken(function (cancel) {
    })
  }

5.全局axios默認值

1 axios.defaults.baseURL = 'https://api.example.com';
2 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
3 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

6.攔截器
你能夠截取請求或響應在被 then 或者 catch 處理以前

//添加請求攔截器<==>請求發起前作的事
axios.interceptors.request.use（function（config）{
     //在發送請求以前作某事
     return config;
   }，function（error）{
     //請求錯誤時作些事
     return Promise.reject（error）;
   }）;

//添加響應攔截器<==>響應回來後作的事
axios.interceptors.response.use（function（response）{
     //對響應數據作些事
     return response;
   }，function（error）{
     //請求錯誤時作些事
     return Promise.reject（error）;
   }）;
   若是你之後可能須要刪除攔截器。、
    var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);
    你能夠將攔截器添加到axios的自定義實例
    
    var instance = axios.create();
    instance.interceptors.request.use(function () {/*...*/});