一、什麼是axios？
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端。簡單的理解就是ajax的封裝
axios本身具有以下特徵：
從瀏覽器中建立 XMLHttpRequest 從 node.js 發出 http 請求 支援 Promise API 攔截請求和響應 轉換請求和響應資料 取消請求 自動轉換JSON資料 客戶端支援防止 CSRF/XSRF
二、安裝
使用 npm:
npm install axios cnpm install axios //taobao源
使用 bower:
bower install axios
三、舉個例子
1、 傳送一個GET請求
//透過給定的ID來發送請求
axios.get('/user?ID=12345')
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
//以上請求也可以透過這種方式來發送
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(res){
console.log(res);
})
.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){
//當這兩個請求都完成的時候會觸發這個函式，兩個引數分別代表返回的結果
}))四、axios的API
（1） 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');（2）請求方式的別名，這裡對所有已經支援的請求方式都提供了方便的別名
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這幾個引數不需要在配置中宣告
（3）併發請求（concurrency）,即是幫助處理併發請求的輔助函式
//iterable是一個可以迭代的引數如陣列等 axios.all(iterable) //callback要等到所有請求都完成才會執行 axios.spread(callback)
（4）建立一個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();十一、補充一些自己例子加深理解
import axios from 'axios'
axios.defaults.hearders.post['Content-type']='application/x-www-form-urlencoded'
axios.defaults.baseURL='http://note-server.hunger-valler.com' //後端伺服器地址
axios.defaults.withCredentials=true //跨越請求
export default request(url,type='get',data={}){
return new promise((resolve,reject)=>{ //二次封裝，方便更改資料
let option={ //axios的config
url,
method:type
validatestatus(status){
return (status>=200 && status{
if(res.status===200){
resolve(res.data)
}else(
reject(res.data)
)
}
).catch(err=>{
reject({msg:'網路異常'})
})
})
}
/* 用法如下：
request('/user','POST',{username:'zhangsan',password:'123456'})
.then(data=>{
console.log(data)
})
*/在實際例子中，用法部分會再次封裝成API（包含路徑等），元件呼叫時候就不用理會路徑內容，直接呼叫方法，方便對資料的管理。
如登入註冊頁面資料管理：
import request from '@/helpers/request'
const URL={
REGISTER:'/auth/register',
LOGIN:'/auth/login',
LOGOUT:'/auth/logout',
GET_INFO:'auth'
}
export default {
register({username,password}){
return request(URL.REGISTER,'POST',{username,password})
},
login({username,password}){
return request(URL.LOGIN,'POST',{username,password})
},
logout(){
return request(URL.LOGOUT)
}
getInfo(){
return request(URL.GET_INFO)
}
}如增刪改查頁面資料管理：
import request from '@/helpers/request'
const URL={
GET:'/notebooks',
ADD:'/notebooks',
UPDATE:'/notebooks/:id',
DELETE:'/notebooks/:id'
}
export default {
getAll(){
return request(URL.GET)
},
addNotebooks({title=''}={title:''}){
return request(URL.ADD,'POST',{title})
},
updateNotebooks(notebookId,{title=''}={title:''}){
return request(URL.UPDATE.replace(':id',notebookId),'PATCH',{title})
},
deleteNotebooks(notebookId){
return request(URL.DELETE.replace(':id',notebookID),'DELETE')
}
}
版权声明：除非特別標注，否則均為網際整理，轉載時請以連結形式注明文章出處。