Axios 詳解

首先祝廣大程序猿們節日快樂!

1、axios簡介

基於promise，用於瀏覽器和node.js的http客戶端

2、特色

• 支持瀏覽器和 node.js
• 支持 promise
• 能攔截請求和響應
• 能轉換請求和響應數據
• 能取消請求
• 自動轉換 JSON 數據
• 瀏覽器端支持防止 CSRF (跨站請求僞造)

3、安裝

一、 利用 npm 安裝 npm install axios --save二、 利用 bower 安裝 bower install axios --save三、 直接利用 cdn 引入

4、例子

一、 發送一個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);
});複製代碼

二、 發送一個POST請求

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});複製代碼

三、 一次性併發多個請求

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){
    //當這兩個請求都完成的時候會觸發這個函數，兩個參數分別表明返回的結果
  }))複製代碼

5、axios的API

（一） axios能夠經過配置（config）來發送請求

一、 axios(config)

//發送一個`POST`請求
axios({
    method:"POST",
    url:'/user/12345',
    data:{
        firstName:"Fred",
        lastName:"Flintstone"
    }
});複製代碼

二、 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實例，而且能夠自定義其配置

一、 axios.create([config])

var instance = axios.create({
  baseURL:"https://some-domain.com/api/",
  timeout:1000,
  headers: {'X-Custom-Header':'foobar'}
});複製代碼

二、 實例的方法

如下是實例方法，注意已經定義的配置將和利用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]])複製代碼

6、請求的配置（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){

  })
}複製代碼

7、請求返回的內容

{
  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);
  })複製代碼

8、默認配置

你能夠設置默認配置，對全部請求都有效

一、 全局默認配置

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';複製代碼

二、 自定義的實例默認設置

//當建立實例的時候配置默認配置
var instance = axios.create({
    baseURL: 'https://api.example.com'
});

//當實例建立時候修改配置
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;複製代碼

三、 配置中的有優先級

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
});複製代碼

9、攔截器

一、你能夠在請求、響應在到達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);
})複製代碼

二、取消攔截器

var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);複製代碼

三、 給自定義的axios實例添加攔截器

var instance = axios.create();
instance.interceptors.request.use(function(){})複製代碼

10、錯誤處理

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);
  });複製代碼

11、取消

你能夠經過一個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();複製代碼

---

節日快樂！

---

以爲有幫助的小夥伴點個贊支持下~

以爲有幫助的小夥伴點個贊支持一下~