axios封裝（一）基礎配置

標籤：發送   image   nod   應對   上傳   charset   use   case   UNC   

axios 是目前流行的Promise網路請求庫，在瀏覽器端他通過 xhr方式建立ajax請求。在node環境下，通過 http 庫建立網路請求。

axios 提供了豐富的配置，這裡講一講我在工作中通常用到的基本配置方法。

因為我在工作中用 vue 進行開發，所以以下代碼預設的環境是 vue-cli。

建立一個 axios 執行個體

為什麼要建立一個 axios 執行個體，而不是在 axios 對象上進行配置呢？是因為我們會應對複雜的使用情境，多個執行個體便於管理。

const isDev = process.env.NODE_ENV === ‘development‘;const instance = axios.create({  // baseURL是在proxyTable中會轉寄的配置，通過環境變數的判斷，可以在開發和生產環境使用不同的url進行請求  baseURL: isDev ? ‘/fakeapi‘ : ‘/api‘,  timeout: 5000,  validateStatus(status) {    // 一般來說，http status為200-300之間時，均判定為請求通過，你可以在這裡修改這個配置(不建議修改)    return status === 200  },  headers: {    // 定義 post 請求編碼格式    post: {      ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=UTF-8‘    }  }});

處理請求參數

雖然對請求設定了編碼格式，但是還是需要進一步設定具體的編碼格式，比如我想進行一些特殊的設定。

qs.stringify 這裡的參數請參考這篇文章 qs.js - 更好的處理url參數

import Qs from ‘qs‘;instance.interceptors.request.use(config => {    // 也可以在這裡給請求添加token之類的欄位    config.data = Qs.stringify(config.data, {arrayFormat: ‘repeat‘, allowDots: true});    return config;}, err => {    return Promise.reject(err);});

處理傳回值

import httpErrorHandler from ‘./httpErrorHandler.js‘;instance.interceptors.response.use(function(data) {    // 這裡可以對返回資料進行處理，比如驗證code是否為1等    return data.data;}, httpErrorHandler)

httpErrorHandler.js 代碼

# httpErrorHandler.jsexport default (error) => {  if (!error.response) {    return Promise.reject({        msg: ‘網路連接逾時‘,        error    });  };  let msg = ‘‘;  const status = error.response.status;  switch (status) {    case 400:        msg = ‘錯誤的請求參數‘;        break;    case 401:        msg = ‘沒有該操作許可權‘;        break;    case 403:        msg = ‘請登入‘;        break;    case 404:        msg = ‘錯誤的請求地址‘;        break;    case 500:    case 501:    case 502:    case 503:    case 504:        msg = ‘伺服器錯誤‘;        break;    default:        msg = ‘未知錯誤‘ + status;  }  return Promise.reject({      msg,      error  });}

封裝 get 方法

和 jquery.ajax 不同，axios的get方式需要通過 prarms 而不是 data參數傳遞：

/** * 封裝後的axios get方法 * * @param {string} url 請求路徑 * @param {object} option 請求參數 * @param {object} [config] 特殊配置項（選填） * @returns */export function get(url, option, config = {}) {  return instance.get(url, { params: option }, config)}// 調用getget(‘http://baidu.com‘, {    a: 1,    b: 2}).then(...).catch(...)

post 方式

post請求方式則要簡單一些，不需要使用 prarms 參數

/** * 封裝後的axios post方法 * * @param {string} url 請求路徑 * @param {object} option 請求參數 * @param {object} [config] 特殊配置項（選填） * @returns */export function get(url, option, config = {}) {  return instance.get(url, option, config)}// 調用postpost(‘http://baidu.com‘, {    a: 1,    b: 2}).then(...).catch(...)

upload 檔案

上傳檔案需要使用不同的header設定和編碼方式，所以需要建立一個單獨的執行個體

const uploadInstance = axios.create({  baseURL: isDev ? ‘/fakeapi‘ : ‘/api‘,  timeout: 15000,  headers: {    // 傳送檔案需要的編碼格式    ‘Content-Type‘: ‘multipart/form-data‘  }});/** * 封裝後的axios upload方法 * * @param {string} url 請求路徑 * @param {formdata} formdata 請求參數, 必須是formdata對象 * @param {object} [config] 特殊配置項（選填） * @returns */export function upload(url, formdata, config = {}) {  return uploadInstance.post(url, formdata, config)}# 使用上傳let formData = new FormData();formData.append("image", file);formData.append("name", ‘name‘);upload(‘http://baidu.com‘, formData, {    onUploadProgress(progressEvent) {        // 展示上傳進度等    }})

axios封裝（一）基礎配置