一、安裝
1.利用npm安裝
npm install axios --save
2. 利用bower安裝
bower install axios --save
3.直接利用cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
二、例子
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(或者設定為`null`或者`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變成5s
instance.get('/longRequest',{
timeout: 5000
});
七、攔截器
1.你可以在請求、響應在到達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 token
var 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(c){
//這個executor函數接受一個cancel function作為參數
cancel = c;
})
})
//取消請求
cancel();
axios官方位址:猛戳這裡!
版權聲明:本文為CSDN部落客「weixin_33924312」的原創文章,遵循CC 4.0 BY-SA版權協定,轉載請附上原文出處連結及本聲明。
原文連結:https://blog.csdn.net/weixin_33924312/article/details/92479154