Vue-admin工作整理（十六）：Ajax-axios进行请求封装+拦截器

典型的工具类封装，增加拦截起来做相应的处理

user.js：

import axios from './index'

export const getUserInfo = ({ userId }) => {
  return axios.request({
    url: '/getUserInfo',
    method: 'post',
    data: { // POST参数的请求是需要放在data里的
      userId
    }
  })
}

axios.js 工具类：

import axios from 'axios'
import { baseURL } from '@/config'
// 以类的形式来进行封装，使用es6的class
class HttpRequest {
  constructor (baseUrl = baseURL) { // 每个类必须的方法，在这个方法中，可以默认接收一些参数:options(参数对象)，
    // 该定义为：传入一个baseUrl参数，当没有这个参数的时候直接取配置内的baseURL数据进行赋值，这种写法为es6的写法
    this.baseUrl = baseUrl // 当使用new HttpRequest的时候，this.baseUrl会将baseUrl返给变量
    this.queue = {} // 设置一个队列（空对象）,以队列形式管理请求
  }
  // 在内容设置一个全局的配置，使用方法来实现，通过该方法，来返回一个内部的配置
  getInsideConfig () {
    const config = {
      baseUrl: this.baseUrl,
      headers: {
        //
      }
    }
    return config
  }
  // 全局拦截器
  interceptors (instance, url) { // 请求拦截器
    instance.interceptors.request.use(config => {
      // 添加一个请求前的控制，比如这里添加一个全局的loading...
      // Spin.show（） // Spin为一个加载中的组件，通过该方法可以控制该组件的显示，此时的页面是不允许点击的，此时多有的组件都会调用这个来进行显示
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 通过Object.keys获取队列的所有属性名,如果没有请求，那么就调用一个全局的loading组件
      }
      this.queue[url] = true // 把url作为一个属性值来传入
      console.log(config)
      return config // 将请求return出去，请求才会继续。
    }, error => { // 当请求出现错误的时候的处理，会提供一个错误信息
      return Promise.reject(error) // 将错误信息返回
    })
    // 定义一个响应拦截器，就是调了接口之后服务端给出响应返回的东西，此时就通过这个方法进行拦截
    instance.interceptors.response.use(res => { // 第一个回调函数，就是服务端返回的内容
      console.log(res)
      delete this.queue[url] // 如果成功响应，那么我就把队列里的对应的数据删掉
      const { data, status } = res // 响应返回内容做一个筛选，提取我们想要使用的两个数据
      return { data, status } // 将请求return出去，请求才会继续，只返回我们想要的数据。
    }, error => { // 第二个函数，用来获取错误信息
      delete this.queue[url] // 如果失败了，也需要把队列里该数据删掉
      return Promise.reject(error) // 将错误信息返回
    })
  }
  request (options) { // 定义完constructor之后，用request来创建一个请求，以参数方式插入一个配置，在使用的时候就是一个实例，调用request方法，插入一个配置
    const instance = axios.create() // 使用axios的create方法创建一个实例，它是一个函数，我们给它传入一个配置
    options = Object.assign(this.getInsideConfig(), options) // es6的方法，通过Object.assign方法将两个对象里
    // 的属性合并成一个对象中去，如果两个对象存在相同的属性，那么取后面的值，所以要把请求的时候传入的配置放在后面，来覆盖全局的配置
    this.interceptors(instance, options.url) // 给实例添加拦截器
    return instance(options)
  }
}

export default HttpRequest