學會了axios封裝，世界都是你的

項目中對axios進行二次封裝

隨着前端技術的發展，網絡請求這一塊，愈來愈多的程序猿選擇使用axios來實現網絡請求。可是單純的axios插件並不能知足咱們平常的使用，所以咱們使用時，須要根據項目實際的狀況來對axios進行二次封裝。

接下來就我對axios的二次封裝詳細的說說，主要包括請求以前、返回響應以及使用等。

「一、請求以前」

通常的接口都會有鑑權認證（token）之類的，所以在接口的請求頭裏面，咱們須要帶上token值以經過服務器的鑑權認證。可是若是每次請求的時候再去添加，不只會大大的加大工做量，並且很容易出錯。好在axios提供了攔截器機制，咱們在請求的攔截器中能夠添加token。

// 請求攔截
axios.interceptors.request.use((config) => {  //....省略代碼  config.headers.x_access_token = token  return config }, function (error) {  return Promise.reject(error) }) 複製代碼

固然請求攔截器中，除了處理添加token之外，還能夠進行一些其餘的處理，具體的根據實際需求進行處理。

---

「二、響應以後」

請求接口，並非每一次請求都會成功。那麼當接口請求失敗的時候，咱們又怎麼處理呢？每次請求的時候處理？封裝axios統一處理？我想一個稍微追求代碼質量的碼農，應該都會選擇封裝axios進行統一處理吧。axios不只提供了請求的攔截器，其也提供了響應的攔截器。在此處，能夠獲取到服務器返回的狀態碼，而後根據狀態碼進行相對應的操做。

// 響應攔截
axios.interceptors.response.use(function (response) {  if (response.data.code === 401 ) {//用戶token失效  //清空用戶信息  sessionStorage.user = ''  sessionStorage.token = ''  window.location.href = '/';//返回登陸頁  return Promise.reject(msg)//接口Promise返回錯誤狀態，錯誤信息msg可有後端返回，也能夠咱們本身定義一個碼--信息的關係。  }  if(response.status!==200||response.data.code!==200){//接口請求失敗，具體根據實際狀況判斷  message.error(msg);//提示錯誤信息  return Promise.reject(msg)//接口Promise返回錯誤狀態  }  return response }, function (error) {  if (axios.isCancel(error)) {  requestList.length = 0  // store.dispatch('changeGlobalState', {loading: false})  throw new axios.Cancel('cancel request')  } else {  message.error('網絡請求失敗,請重試')  }  return Promise.reject(error) }) 複製代碼

固然響應攔截器同請求攔截器同樣，還能夠進行一些其餘的處理，具體的根據實際需求進行處理。

---

「三、使用axios」

axios使用的時候通常有三種方式：

• 執行get請求

axios.get('url',{
 params:{},//接口參數 }).then(function(res){  console.log(res);//處理成功的函數 至關於success }).catch(function(error){  console.log(error)//錯誤處理 至關於error }) 複製代碼

• 執行post請求

axios.post('url',{
 data:xxx//參數  },{  headers:xxxx,//請求頭信息 }).then(function(res){  console.log(res);//處理成功的函數 至關於success }).catch(function(error){  console.log(error)//錯誤處理 至關於error }) 複製代碼

• axios API 經過相關配置傳遞給axios完成請求

axios({
 method:'delete',  url:'xxx',  cache:false,  params:{id:123},  headers:xxx, }) //------------------------------------------// axios({  method: 'post',  url: '/user/12345',  data: {  firstName: 'monkey',  lastName: 'soft'  } });  複製代碼

直接使用api的方式雖然簡單，可是不一樣請求參數的名字不同，在實際開發過程當中很容易寫錯或者忽略，容易爲開發形成沒必要要的時間損失。

前面兩種方式雖然沒有參數不一致的問題，可是使用的時候，太過於麻煩。那麼怎麼辦呢？

前面兩種雖然使用過於麻煩，可是仔細觀察，是能夠發現有必定的類似點，咱們即可以基於這些類似點二次封裝，造成適合咱們使用的一個請求函數。直接上代碼：

/*
*url:請求的url *params:請求的參數 *config:請求時的header信息 *method:請求方法 */ const request = function ({ url, params, config, method }) {  // 若是是get請求 須要拼接參數  let str = ''  if (method === 'get' && params) {  Object.keys(params).forEach(item => {  str += `${item}=${params[item]}&`  })  }  return new Promise((resolve, reject) => {  axios[method](str ? (url + '?' + str.substring(0, str.length - 1)) : url, params, Object.assign({}, config)).then(response => {  resolve(response.data)  }, err => {  if (err.Cancel) {  } else {  reject(err)  }  }).catch(err => {  reject(err)  })  }) } 複製代碼

這樣咱們須要接口請求的時候，直接調用該函數就行了。無論什麼方式請求，傳參方式都同樣。 最後，若是你們想和我一塊兒討論探索前端，能夠關注一下個人公衆號，不按期更新干貨，更可加入技術羣交流討論。

本文使用 mdnice 排版