1、首先axios不支持vue.use()方式聲明使用，看了所有近乎相同的axios文檔都沒有提到這一點
建議方式
在main.js中如下聲明使用
import axios from 'axios'; Vue.prototype.$axios=axios; 那么在其他vue組件中就可以this.$axios調用使用
2.小小的提一下vue cli腳手架前端調后端數據接口時候的本地代理跨域問題，如我在本地localhost訪問接口http://40.00.100.100:3002/是要跨域的，相當於瀏覽器設置了一到門檻，會報錯XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control….
為什么跨域同源非同源自己去查吧，在webpack配置一下proxyTable就OK了，如下
config/index.js
dev: { 加入以下 proxyTable: { '/api': { target: 'http://40.00.100.100:3002/',//設置你調用的接口域名和端口號 別忘了加http changeOrigin: true, pathRewrite: { '^/api': '/'//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’即可 } } },
試一下，跨域成功了，但是注意了，這只是開發環境（dev）中解決了跨域問題，生產環境中真正部署到服務器上如果是非同源還是存在跨域問題，如我們部署的服務器端口是3001，需要前后端聯調，第一步前端我們可以分生產production和開發development兩種環境分別測試，在config/dev.env.js和prod.env.js里也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中我們用上面配置的代理地址api，生產環境下用正常的接口地址，所以這樣配置
module.exports = merge(prodEnv, { NODE_ENV: '"development"',//開發環境 API_HOST:"/api/" })
module.exports = { NODE_ENV: '"production"',//生產環境 API_HOST:'"http://40.00.100.100:3002/"' }
當然不管是開發還是生產環境都可以直接請求http://40.00.100.100:3002/。配置好之后測試時程序會自動判斷當前是開發還是生產環境，然后自動匹配API_HOST，我們在任何組件里都能用process.env.API_HOST來使用地址如
instance.post(process.env.API_HOST+'user/login', this.form)
然后第二步后端服務器配置一下cros跨域即可，就是access-control-allow-origin：*允許所有訪問的意思。綜上：開發的環境下我們前端可以自己配置個proxy代理就能跨域了，真正的生產環境下還需要后端的配合的。某大神說：此方法ie9及以下不好使，如果需要兼容，最好的辦法是后端在服務器端口加個代理，效果類似開發時webpack的代理。
3、axios發送get post請求問題
發送post請求時一般都要設置Content-Type，發送內容的類型，application/json指發送json對象但是要提前stringify一下。application/xxxx-form指發送？a=b&c=d格式，可以用qs的方法格式化一下，qs在安裝axios后會自動安裝，只需要組件里import一下即可。
const postData=JSON.stringify(this.formCustomer); 'Content-Type':'application/json'} const postData=Qs.stringify(this.formCustomer);//過濾成？&=格式 'Content-Type':'application/xxxx-form'}
4.axios攔截器的使用
當我們訪問某個地址頁面時，有時會要求我們重新登錄后再訪問該頁面，也就是身份認證失效了，如token丟失了，或者是token依然存在本地，但是卻失效了，所以單單判斷本地有沒有token值不能解決問題。此時請求時服務器返回的是401錯誤，授權出錯，也就是沒有權利訪問該頁面。
我們可以在發送所有請求之前和操作服務器響應數據之前對這種情況過濾。
// http request 請求攔截器，有token值則配置上token值 axios.interceptors.request.use( config => { if (token) { // 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了 config.headers.Authorization = token; } return config; }, err => { return Promise.reject(err); }); // http response 服務器響應攔截器，這里攔截401錯誤，並重新跳入登頁重新獲取token axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 這里寫清除token的代碼 router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath}//登錄成功后跳入瀏覽的當前頁面 }) } } return Promise.reject(error.response.data) });
如果你想在稍后移除攔截器，可以這樣：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor); 5.請求配置
這些是用於發出請求的可用配置選項。 只有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) {}) } 全局axios默認值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
配置中的有優先級
config配置將會以優先級別來合並，順序是lib/defauts.js中的默認配置，然后是實例中的默認配置，最后是請求中的config參數的配置，越往后等級越高，后面的會覆蓋前面的例子。
//創建一個實例的時候會使用libray目錄中的默認配置 //在這里timeout配置的值為0，來自於libray的默認值 var instance = axios.create(); //回覆蓋掉library的默認值 //現在所有的請求都要等2.5S之后才會發出 instance.defaults.timeout = 2500; //這里的timeout回覆蓋之前的2.5S變成5s instance.get('/longRequest',{ timeout: 5000 });