axios使用教程

標籤：username   執行   stream   pac   array   適用於   resolved   聯絡   mda   

一、安裝

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變成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來取消一個請求

1. 你可以通過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("操作被使用者取消");

1. 你可以給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();

連結：http://www.jianshu.com/p/df464b26ae58
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

axios使用教程