vue中axios请求封装（包括处理异常响应，添加loading动画，公共请求头）

配置小贴士

封装请求头时注意一下Content-Type属性，看后台使用什么方式接收，如是表单形式接收需要设置为application/x-www-form-urlencoded;charset=utf-8或者multipart/form-data，此时要使用qs插件处理数据将json数据转化为from数据，方法如下:

import qs from 'qs';     // json --> form
export function post(url, data){
  return new Promise((resolve,reject) => {
    request({
      method: 'post',
      url: url,
      data: qs.stringify(data)
    }).then(res => {
      if (res.flag) {
        resolve(res)
      } else {
        Message({
          message: res.message,
          type: 'error',
          duration: 2 * 1000
        })
      }
    }).catch(err => {
      Message({
        message: '网络异常',
        type: 'error',
        duration: 2 * 1000
      })
      reject(err)
    })
  })
}

axios的配置中withCredentials: true配置表示允许携带cookie

axios.create({
 withCredentials: true,
 baseURL: baseUrl,     // 基础路径
 timeout: 5000,        // 请求超时， 5000毫秒
 headers: {            // 添加 header 头信息
   // json形式传输
   'Content-Type': 'application/json;charset=utf-8'
 }
});

如需了解更多axios配置，点我

上代码

封装的request.js公共请求文件

封装请求到这里就结束了，如果不会使用，请看下一篇 手摸手封装vue中api文件，让项目更容易维护