axios
一般我們會在 vue中的main.js 中 寫入以下代碼
import Vue from ‘vue’;
import axios from ‘axios’;
Vue.prototype.$http = axios;
在代碼中就可以這樣使用了
Vue.http().then();
一、安裝
1、 利用npm安裝npm
install axios --save
2、 利用bower安裝bower install axios --save
3、 直接利用cdn引入
二、例子
1、 發送一個GET請求
//通過給定的ID來發送請求axios.get(’/user?ID=12345’) .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); });//以上請求也可以通過這種方式來發送axios.get(’/user’,{ params:{ ID:12345 }}).then(function(response){ console.log(response);}).catch(function(err){ console.log(err);});
2、 發送一個POST請求
axios.post(’/user’,{ firstName:‘Fred’, lastName:‘Flintstone’}).then(function(res){ console.log(res);}).catch(function(err){ console.log(err);});
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){ //當這兩個請求都完成的時候會觸發這個函數，兩個參數分別代表返回的結果 }))
三、axios的API
（一） axios可以通過配置（config）來發送請求
1、 axios(config)
//發送一個POST請求axios({ method:“POST”, url:’/user/12345’, data:{ firstName:“Fred”, lastName:“Flintstone” }});
2、 axios(url[,config])
//發送一個GET請求（默認的請求方式）axios(’/user/12345’);
（二）、 請求方式的別名，這裏對所有已經支持的請求方式都提供了方便的別名
axios.request(config); axios.get(url[,config]); axios.delete(url[,config]); axios.head(url[,config]); axios.post(url[,data[,config]]); axios.put(url[,data[,config]]) axios.patch(url[,data[,config]])
注意：當我們在使用別名方法的時候，url,method,data這幾個參數不需要在配置中聲明
（三）、 併發請求（concurrency）,即是幫助處理併發請求的輔助函數
//iterable是一個可以迭代的參數如數組等axios.all(iterable)//callback要等到所有請求都完成纔會執行axios.spread(callback)
（四）、創建一個axios實例，並且可以自定義其配置
1、 axios.create([config])
var instance = axios.create({ baseURL:“https://some-domain.com/api/”, timeout:1000, headers: {‘X-Custom-Header’:‘foobar’}});
2、 實例的方法
一下是實例方法，注意已經定義的配置將和利用create創建的實例的配置合併axios#request(config) axios#get(url[,config]) axios#delete(url[,config]) axios#head(url[,config]) axios#post(url[,data[,config]]) axios#put(url[,data[,config]]) axios#patch(url[,data[,config]])
四、請求的配置（request config）
以下就是請求的配置選項，只有url選項是必須的，如果method選項未定義，那麼它默認是以GET的方式發出請求{ //url是請求的服務器地址 url:’/user’, //method是請求資源的方式 method:‘get’//default //如果url不是絕對地址，那麼baseURL將會加到url的前面 //當url是相對地址的時候，設置baseURL會非常的方便 baseURL:‘https://some-domain.com/api/’, //transformRequest選項允許我們在請求發送到服務器之前對請求的數據做出一些改動 //該選項只適用於以下請求方式：put/post/patch //數組裏面的最後一個函數必須返回一個字符串、-一個ArrayBuffer或者Stream transformRequest:[function(data){ //在這裏根據自己的需求改變數據 return data; }], //transformResponse選項允許我們在數據傳送到then/catch方法之前對數據進行改動 transformResponse:[function(data){ //在這裏根據自己的需求改變數據 return data; }], //headers選項是需要被髮送的自定義請求頭信息 headers: {‘X-Requested-With’:‘XMLHttpRequest’}, //params選項是要隨請求一起發送的請求參數----一般鏈接在URL後面 //他的類型必須是一個純對象或者是URLSearchParams對象 params: { ID:12345 }, //paramsSerializer是一個可選的函數，起作用是讓參數（params）序列化 //例如(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選項時dada必須是以下幾種類型之一 //string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams //僅僅瀏覽器：FormData/File/Bold //僅node:Stream data { firstName:“Fred” }, //timeout選項定義了請求發出的延遲毫秒數 //如果請求花費的時間超過延遲的時間，那麼請求會被終止 timeout:1000, //withCredentails選項表明了是否是跨域請求 withCredentials:false,//default //adapter適配器選項允許自定義處理請求，這會使得測試變得方便 //返回一個promise,並提供驗證返回 adapter: function(config){ /…/ }, //auth表明HTTP基礎的認證應該被使用，並提供證書 //這會設置一個authorization頭（header）,並覆蓋你在header設置的Authorization頭信息 auth: { username:“zhangsan”, password: “s00sdkf” }, //返回數據的格式 //其可選項是arraybuffer,blob,document,json,text,stream responseType:‘json’,//default // xsrfCookieName: ‘XSRF-TOKEN’,//default xsrfHeaderName:‘X-XSRF-TOKEN’,//default //onUploadProgress上傳進度事件 onUploadProgress:function(progressEvent){ //下載進度的事件onDownloadProgress:function(progressEvent){} }, //相應內容的最大值 maxContentLength:2000, //validateStatus定義了是否根據http相應狀態碼，來resolve或者reject promise //如果validateStatus返回true(或者設置爲或者undefined),那麼promise的狀態將會是resolved,否則其狀態就是rejected validateStatus:function(status){ return status >= 200 && status <300;//default }, //maxRedirects定義了在nodejs中重定向的最大數量 maxRedirects: 5,//default //httpAgent/httpsAgent定義了當發送http/https請求要用到的自定義代理 //keeyAlive在選項中沒有被默認激活 httpAgent: new http.Agent({keeyAlive:true}), httpsAgent: new https.Agent({keeyAlive:true}), //proxy定義了主機名字和端口號， //auth表明http基本認證應該與proxy代理鏈接，並提供證書 //這將會設置一個Proxy-Authorization header,並且會覆蓋掉已經存在的Proxy-Authorization header proxy: { host:‘127.0.0.1’, port: 9000, auth: { username:‘skda’, password:‘radsd’ } }, //cancelToken定義了一個用於取消請求的cancel token //詳見cancelation部分 cancelToken: new cancelToken(function(cancel){ })}
五、請求返回的內容
{ data:{}, status:200, //從服務器返回的http狀態文本 statusText:‘OK’, //響應頭信息 headers: {}, //config是在請求的時候的一些配置信息 config: {}}
你可以這樣來獲取響應信息axios.get(’/user/12345’) .then(function(res){ console.log(res.data); console.log(res.status); console.log(res.statusText); console.log(res.headers); console.log(res.config); })
六、默認配置
你可以設置默認配置，對所有請求都有效1、 全局默認配置
axios.defaults.baseURL = ‘http://api.exmple.com’;axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;axios.defaults.headers.post[‘content-Type’] = ‘appliction/x-www-form-urlencoded’;
2、 自定義的實例默認設置
//當創建實例的時候配置默認配置var instance = axios.create({ baseURL: ‘https://api.example.com’}); //當實例創建時候修改配置instance.defaults.headers.common[“Authorization”] = AUTH_TOKEN;
3、 配置中的有優先級
config配置將會以優先級別來合併，順序是lib/defauts.js中的默認配置，然後是實例中的默認配置，最後是請求中的config參數的配置，越往後等級越高，後面的會覆蓋前面的例子。//創建一個實例的時候會使用libray目錄中的默認配置//在這裏timeout配置的值爲0，來自於libray的默認值var instance = axios.create();//回覆蓋掉library的默認值//現在所有的請求都要等2.5S之後纔會發出instance.defaults.timeout = 2500;//這裏的timeout回覆蓋之前的2.5S變成5sinstance.get(’/longRequest’,{ timeout: 5000});
七、攔截器
你可以在請求、響應在到達then/catch之前攔截他們//添加一個請求攔截器axios.interceptors.request.use(function(config){ //在請求發出之前進行一些操作 return config;},function(err){ //Do something with request error return Promise.reject(error);});//添加一個響應攔截器axios.interceptors.response.use(function(res){ //在這裏對返回的數據進行處理 return res;},function(err){ //Do something with response error return Promise.reject(error);})
2、取消攔截器
var myInterceptor = axios.interceptor.request.use(function(){/…/});axios.interceptors.request.eject(myInterceptor);
3、 給自定義的axios實例添加攔截器
var instance = axios.create();instance.interceptors.request.use(function(){})
八、錯誤處理
axios.get(’/user/12345’) .catch(function(error){ if(error.response){ //請求已經發出，但是服務器響應返回的狀態嗎不在2xx的範圍內 console.log(error.response.data); console.log(error.response.status); console.log(error.response.header); }else { //一些錯誤是在設置請求的時候觸發 console.log(‘Error’,error.message); } console.log(error.config); });
九、取消
你可以通過一個cancel
token來取消一個請求你可以通過CancelToken.source工廠函數來創建一個cancel
tokenvar CancelToken = axios.CancelToken;var source = CancelToken.source(); axios.get(’/user/12345’,{ cancelToken: source.token}).catch(function(thrown){ if(axios.isCancel(thrown)){ console.log(‘Request canceled’,thrown.message); }else { //handle error }}); //取消請求（信息的參數可以設置的）source.cance(“操作被用戶取消”);
你可以給cancelToken構造函數傳遞一個executor function來創建一個cancel token:var cancelToken = axios.CancelToken;var cance;axios.get(’/user/12345’,{ cancelToken: new CancelToken(function©{ //這個executor函數接受一個cancel function作爲參數 cancel = c; })})//取消請求cancel();
本文來自 hjh15827475896 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/hjh15827475896/article/details/77005928?utm_source=copy