axios學習筆記

API

首先，咱們把axios全部的【API】和【配置】及【返回內容】列一下：

//經過配置發送請求
axios(config)
axios(url[,config])

//別名
axios.request(config);
axios.get(url[,config]);
axios.delete(url[,config]);
axios.head(url[,config]);
axios.options(url[, config])
axios.post(url[,data[,config]]);
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

//併發請求
axios.all(iterable) //iterable是一個能夠迭代的參數，如：數組
axios.spread(callback) //callback會等到全部請求都完成纔會執行

//建立實例
axios.create([config])

//實例的方法
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

//全局默認配置
axios.defaults.*
//如：
//axios.defaults.baseURL
//axios.defaults.headers.common['Authorization']
//axios.defaults.headers.post['content-Type']


//實例默認配置
instance.defaults.* 
//如：
//var instance = axios.create();
//instance.defaults.headers.common['Authorization']

//取消請求
axios.CancelToken
axios.CancelToken.source()
axios.CancelToken.source().token
axios.CancelToken.source().cancel() //取消請求
axios.isCancel(thrown) //判斷是否取消了請求

new axios.CancelToken(callback(cancel)) //調用構造函數

//攔截器及取消攔截器
axios.interceptors.*
//如：
//axios.interceptors.request.use(callback(config),callback(error))
//axios.interceptors.response.use(callback(res),callback(error))

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

//實例攔截器
instance.interceptors.*
//如：
//var instance = axios.create();
//instance.interceptors.request.use(function(){})


//請求的配置
{
  //`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,
  statusText:'OK', //從服務器返回的http狀態文本
  headers: {},//響應頭信息
  config: {}//`config`是在請求的時候的一些配置信息
}

 

 

簡單的使用

關於安裝請自行移步官網 https://www.npmjs.com/package/axios

Example:

返回成功的結果：

返回失敗的結果：

 

封裝

因爲在實際項目中，請求比較複雜，因此須要二次封裝axios以達到簡化操做的目的。

封裝的思路也就是把相同的部分抽取出來，寫進函數中作爲一個模塊使用，不一樣的部分對外暴露出接口。

 一、首先使用create方法建立一個axios實例對象，對象的參數爲請求的配置

二、建立一個函數，並對外暴露出接口

三、在$http函數中，使用ES6中的異步操做Promise，返回一個Promise。這裏爲何要這麼作呢？且看前面那個簡單的例子：

axios的特性是：

• 從瀏覽器生成xmlhttprequest
• 從node.js發出http請求
• 支持Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• JSON數據的自動轉換
• 客戶端支持對XSRF的保護

因此這裏就須要使用Promise來作一層封裝：

 

其實到了這裏，基本功能是有了，可是實際開發中，須要判斷各類狀況，因此咱們再加點東西吧：

當一個請求發送給服務器後，服務器會返回前端和後端人員約定好的一套返回規則，好比會有一個code字段，不一樣的code值表明着不一樣的狀態：0：成功，1：異常一，2：異常二等等：

到了這裏好像已經考慮的挺周全了，可是能夠想像仍是有改進的空間，當請求狀態不在200-300之間的狀況，是否也應該給出提示呢？

 

差很少了，如今有一個問題，若是請求過程當中，我想攔截請求和響應，或者轉換，甚至是取消，怎麼辦呢？如今有幾方法能夠作到，在暴露的$Http方法以前攔截或轉換：

最後，使用它吧