对axios进行二次封装

第一步

在static/js/创建http.js文件

import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.withCredentials = true //请求携带cookie
axios.defaults.crossDomain = true //请求携带额外数据(不包含cookie)
axios.defaults.baseURL = api //请求的api

//防止重复请求
const pending = []
const CancelToken = axios.CancelToken
const cancelPending = config => {
  pending.forEach((item, index) => {
    if (config) {
      if (item.UrlPath === config.url) {
        item.Cancel() //取消请求
        pending.splice(index, 1) //移除当前请求记录
      }
    } else {
      item.Cancel() //取消请求
      pending.splice(index, 1) // 移除当前请求记录
    }
  })
}

//http request 拦截器
axios.interceptors.request.use(
  config => {
     cancelPending(config)
     config.cancelToken = new CancelToken(res => {
        pending.push({ 'UrlPath': config.url, 'Cancel': res })
     })
    if (config.method === 'post' ) { //uploadApi是上传api,不对post做处理
      config.data = qs.stringify({
        ...config.data
      })
    } else if (config.method === 'get') {
      config.params = {
        ...config.params
      }
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
//http response 拦截器
axios.interceptors.response.use(
  response => {
    cancelPending(response.config)
    return response
  },
  error => {
    return Promise.reject(error)
  }
)
/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(response => {
      if (response.data.success) {
        resolve(response.data.payload)
      } else {
        reject(response.data.error)
      }
    }).catch(err => {
      reject(err)
    })
  })
}
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(apiUrl, data).then(response => {
      if (response.data.success) {
        resolve(response.data.payload)
      } else {
        reject(response.data.error)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

第二步

在main.js中引入

import axios from "axios"
import { post, get } from "../static/js/http"

Vue.prototype.$post = post
Vue.prototype.$get = get

第三步

在组件中使用

this.$post('接口地址', {
   //请求参数写在这里
}).then(res => {
   //请求成功处理
}).catch(err => {
  //请求失败处理
}

//其他请求方式同理.....