Vue对axios进行封装简化请求操作

原文：https://www.blog.hiyj.cn/article/detail/96

一、源码链接:https://gitee.com/mirrors/vue-element-admin/blob/master/src/utils/request.js

二、使用示例

有时更倾向于把需要请求的封装到api目录统一管理，但是每个请求直接用axios总归显得有些不太”简洁“，这里看到了vue-admin-element的请求工具感觉很好用，推荐一下

1. api函数请求示例

// 这里的from请填写自己的路径
import request from '../utils/request.js';

/**
 *  POST请求，参数"data"为POST请求限定的，参数是js对象类型，JSON格式
 */
export function getMyText() {
  return request({
    url: '/api/getMyText',
    method: 'post',
    data: {
      id: 110
    }
  })
}

/**
 *  GET请求，参数"params"为GET请求限定的，参数是js对象类型，JSON格式
 */
export function getMyLove() {
  return request({
    url: '/api/getMyLove', 
    method: 'get',
    params: { id }
  })
}

2. api函数使用示例

getMyText().then(rsp => {
   console.log(rsp.data)
})

getMyLove().then(rsp => {
   console.log(rsp.data)
})

三、工具源码

import axios from 'axios' // 主要是对这个的封装
import { MessageBox, Message } from 'element-ui' // 请求返回码不正确时可以使用element的冒泡提示

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 完整url = 服务根url + 请求url拼接的； 服务根url来源于全局变量；请求url来源于api函数的url参数。
  // withCredentials: true, // 跨域请求时发送cookie
  timeout: 5000 // 超过5s请求超时
})

// request interceptor
service.interceptors.request.use(
  config => {
    // 请求之前的设置
    // 添加请求头信息，可以根据需要自行选择，也可以不要
    // 例如请求头加入“X-Token”键 
    config.headers['X-Token'] = "自己的请求头value"
    return config
  },
  error => {
    // 请求错误时
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // 在这里限定了返回的必须要有返回码——code键，且返回码不为20000时视为请求结果错误的    		 
    if (res.code !== 20000) {
      // 这是element-ui的错误信息提示
      Message({
        // 如果返回值有键-message，则错误信息是自定义的返回信息值，否则只提示'Error'
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 你也可以加入其它一些返回码的判断，也可以根据某些返回码跳转到某些页面
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service