一个axios封装方法分析

代码：

import axios from 'axios'
import state from 'state'

class HttpRequest {
    constructor(baseUrl = baseURL){
        this.baseUrl = baseUrl
        // 判断当前是否有请求未结束，
        this.queue = {}
    }
    getInsideConfig(){
        const config = {
            baseURL: this.baseUrl,
            Headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json;charset=UTF-8',
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin',
            withCredentials: true
        }
        if (state.token) {
          config.headers.Authorization = user.state.token
        }
        return config
    }
    distroy (url) {
      delete this.queue[url]
      if (!Object.keys(this.queue).length) {
        //   ...
        // 全局loading结束
      }
    }
    setInterceptors(instance, url){
        const that = this
        // 请求拦截
        instance.interceptors.request.use(config => {
          // 全局loading...
          if (!Object.keys(that.queue).length) {
            //   ...
            // 加载开始
          }
          that.queue[url] = true
          return config
        }, error => {
          return Promise.reject(error)
        })
        // 响应拦截
        instance.interceptors.response.use(res => {
          this.distroy(url)
        //   通用响应拦截操作，如处理返参信息返回固定格式的信息
        return res
        }, error => {
          this.distroy(url)
        //   错误消息弹框、错误操作
          return Promise.reject(error)
        })
    }
    // 生成请求，处理请求信息、参数等
    request (options) {
      const instance = axios.create()
      let data = {}
      if (options.params || options.data) {
        let dataObj = options.params ? options.params : options.data
        if (!(options.data instanceof FormData)) {
          data = Object.assign(dataObj, dataObj)
          if (options.method === 'post' || options.method === 'put') {
            if (!configIndex.isMock || process.env.NODE_ENV !== 'development') {
              data = data.notEncode?data:Base64.encode(JSON.stringify(data))
            }
          }
        } else {
          data = dataObj
        }
      }
      if (options.method === 'get') {
        options.params = data
      } else {
        options.data = data
      }
      options = Object.assign(this.getInsideConfig(), options)
      this.interceptors(instance, options.url)
      return instance(options)
    }
}
export default HttpRequest

下一文件设置baseurl

// 从上一文件中引入HttpRequest
import HttpRequest from ''
const baseUrl = ''

const axios = new HttpRequest(baseUrl)
export default axios

下一文件设置请求类型，输出方法

import axios from ''

export const getAxiosData = (url, query) => { // axios get类型
  return axios.request({
    url: url,
    method: 'get',
    params: { ...query }
  })
}

export const _postAxiosData = (url, query) => { // axios get类型
  return axios.request({
    url: url,
    method: 'post',
    params: { ...query }
  })
}

export const deleteDataId = (url, query) => { // axios delete类型
  return axios.request({
    url: url,
    method: 'delete',
    data: { ...query }
  })
}

export const postAxiosData = (url, query) => { // axios post类型
  return axios.request({
    url: url,
    method: 'post',
    data: query
  })
}

export const putAxiosData = (url, query) => { // axios put类型
  return axios.request({
    url: url,
    method: 'put',
    data: query
  })
}

使用方法：

// 引入方法
import { postAxiosData } from ''

postAxiosData(url, query).then(res => {
    if(res.code == 200){
        console.log(res)
    }
})