axios封裝（一）基礎配置

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.js

export 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)
}

// 調用get
get('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)
}

// 調用post
post('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 {object} option 請求參數
 * @param {object} [config] 特殊配置項（選填）
 * @returns
 */
export function get(url, option, config = {}) {
  let formdata = new FormData();
  Object.keys(option).forEach(key=>{
      formdata.append(key, option[key])
  })
  return uploadInstance.post(url, formdata, config)
}

# 使用上傳
let data = {
    a: 1,
    image: input.files[0],
}
let config = {
    onUploadProgress(progressEvent) {
    // 展現上傳進度等
    }   
}

upload('http://baidu.com', data, config)