axios二次封裝

謝彪發表於2019-02-16
iOS封裝
import axios from `axios`
import qs from `qs`
import ErrorCode from `./error`//封裝code錯誤時對應的提示
import router from `../router/index` //這裡的router 請找你對應的router
import {
  Message
} from `element-ui`;
const service = axios.create({
  baseURL: "http://localhost:3000", // 封裝請求地址的字首
  timeout: 5000 // 超時時間
})

封裝請求頭

service.interceptors.request.use(config => {
    /**
     * 請求之前判斷token是否存在或者過期，如果過期直接跳轉到登陸頁面，再次獲取token，在這裡你還可以做其他判斷
     * **/
    if(!sessionStorage.getItem("token")) {
        router.push(`/Login`)
    }
    if (config.method === "post") {
      // 序列化,若是能直接接受json 格式,可以不用 qs 來序列化的
      config.data = qs.stringify(config.data);
    }    
    return config
  }, error => {
    loadinginstace.close()
    Message.error({
      message: `載入超時`
    })
    return Promise.reject(error)
})

封裝響應

service.interceptors.response.use(function (response) {    
    if(response.data.code != 200){ //這裡約定後臺返回code為200時為正確的請求響應    
      Message.error({
        message: `${ErrorCode[response.data.code]}`//這裡code不是200的時候顯示自己封裝的錯誤code提示
      })      
    }
        return response.data
    }, function (error) {
        // 對響應錯誤做點什麼
    return Promise.reject(error);
});

封裝post請求

   export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
      let parms = {
        token:"4552565215"
      }
      service.post(url,Object.assign(parms,data))//可以把你專案的必傳項又不會發生改變的例如token 封裝再這裡就不用每次寫token了
        .then(response => {
          resolve(response);
        }, err => {
          reject(err)
        })
        .catch(res => {
          console.log("超時處理",res)
        })
    })
  }

ErrorCode示例

const ErrorCode = {
    "100":"錯誤1",
    "101":"錯誤2",
    "102":"錯誤3",
    "103":"錯誤4",
    "104":"錯誤5",
}
export default ErrorCode

最後說說我理解的為什麼要封裝axios

1.在請求攔截中先需要判斷一些必要的因素比如沒有token的話需要直接跳轉login頁面重新獲取。
2.預設字首比如"http://baidu.com",然後上線之前使用本地的字首，上線前改成你的線上地址再打包，當讓這裡可以使用webpack的配置來判斷開發環境和生產環境使用不同地址。這個就看你自己了
3.在響應攔截中可以統一判斷返回的code顯示對應的錯誤資訊。給使用者以提示，
4.在封裝對應的get或者post的時候把一些固定必傳的引數加上去，寫其他請求時加上改請求的其他引數就好了
5.超時的設定，以及超時後的一些處理，是重新請求還是做其他操作。
6.最後我能想到的也就這些，如有大佬路過可以指正隨便加以指點，萬分感謝！

相關文章