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)