axios拦截器的封装请求

axios请求封装成一个类

// 封装axios 的请求，返回重新封装的数据格式
import axios from 'axios'
import errorHandle from './errorHandle'

class HttpRequest {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
  }

  // 获取实例的配置
  getInsideConfig () {
    const config = {
      baseURL: this.baseURL,
      headers: {
        'Content-type': 'application/json;charset=utf-8'
      },
      timeout: 10000
    }
    return config
  }

  // 设定拦截器
  interceptors (instance) {
    // Add a request interceptor 请求拦截器
    instance.interceptors.request.use(function (config) {
      // Do something before request is sent
      console.log('config is:')
      console.log(config)
      return config
    }, (err) => {
      // Do something with request error
      errorHandle(err)
      return Promise.reject(err)
    })

    // 对错误统一处理

    // Add a response interceptor 响应拦截器
    instance.interceptors.response.use((res) => {
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      console.log('res is:')
      console.log(res)
      if (res.status === 200) {
        return Promise.resolve(res.data)
      } else {
        return Promise.reject(res)
      }
    }, (err) => {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      errorHandle(err)
      return Promise.reject(err)
    })
  }

  // 创建实例
  request (options) {
    const instance = axios.create()
    this.interceptors(instance)
    const newOptions = Object.assign(this.getInsideConfig(), options)
    return instance.request(newOptions)
  }

  // get 请求
  get (url, config) {
    const options = Object.assign({
      method: 'get',
      url: url
    }, config)
    return this.request(options)
  }

  // post 请求
  post (url, data) {
    const options = Object.assign({
      method: 'post',
      url: url,
      data: data
    })
    return this.request(options)
  }
}

export default HttpRequest

最新版本添加了拦截重复请求的情况

// 封装axios 的请求，返回重新封装的数据格式
import axios from 'axios'
import errorHandle from './errorHandle'
const CancelToken = axios.CancelToken
class HttpRequest {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
    this.pending = {}
  }

  // 获取实例的配置
  getInsideConfig () {
    const config = {
      baseURL: this.baseURL,
      headers: {
        'Content-type': 'application/json;charset=utf-8'
      },
      timeout: 10000
    }
    return config
  }

  removePending (key, isRequest = false) {
    if (this.pending[key] && isRequest) {
      this.pending[key]('取消重复请求')
    }
    delete this.pending[key]
  }

  // 设定拦截器
  interceptors (instance) {
    instance.interceptors.request.use((config) => {
      // Do something before request is sent
      const key = config.url + '&' + config.method
      this.removePending(key, true)
      config.cancelToken = new CancelToken((c) => {
        this.pending[key] = c
      })
      return config
    }, (err) => {
      // Do something with request error
      errorHandle(err)
      return Promise.reject(err)
    })

    // 对错误统一处理

    // Add a response interceptor 响应拦截器
    instance.interceptors.response.use((res) => {
      const key = res.url + '&' + res.method
      this.removePending(key)
      if (res.status === 200) {
        return Promise.resolve(res.data)
      } else {
        return Promise.reject(res)
      }
    }, (err) => {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      errorHandle(err)
      return Promise.reject(err)
    })
  }

  // 创建实例
  request (options) {
    const instance = axios.create()
    this.interceptors(instance)
    const newOptions = Object.assign(this.getInsideConfig(), options)
    return instance.request(newOptions)
  }

  // get 请求
  get (url, config) {
    const options = Object.assign({
      method: 'get',
      url: url
    }, config)
    return this.request(options)
  }

  // post 请求
  post (url, data) {
    const options = Object.assign({
      method: 'post',
      url: url,
      data: data
    })
    return this.request(options)
  }
}

export default HttpRequest