axios封装

1、封装axios

import axios from 'axios';
import { baseUrl } from '../config/env'
import { getToken } from '@/utils/auth'
// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = baseUrl

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['token'] = getToken()
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    return Promise.resolve(error.response)
  })

export default axios

2、对请求做封装，具体怎么来封装，根据自己的接口来

import Vue from 'vue'
import axios from './request'
import qs from 'qs'
import { removeToken } from '@/utils/auth'
export default async (url = '',
 type = 'POST') => {
  type = type.toLowerCase()
  return new Promise((resolve, reject) => {
    var request = null
    const CancelToken = axios.CancelToken
    if (type === 'form') {
      let transform = qs.stringify(data);
      request = axios({
        method: 'post',
        url: url,
        data: transform,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }, {
        cancelToken: new CancelToken(function executor (c) {
          Vue.$httpRequestList.push(c)
        })
      })
    } else if (type === 'down') {
      request = axios({
        method: 'post',
        url: url,
        data: data,
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/octet-stream'
        }
      }, {
        cancelToken: new CancelToken(function executor (c) {
          Vue.$httpRequestList.push(c)
        })
      })
    } else {
      if (data instanceof Object) {
        if (type === 'post') {
          request = axios({
            method: type,
            url: url,
            params: data
          }, {
            cancelToken: new CancelToken(function executor (c) {
              Vue.$httpRequestList.push(c)
            })
          })
        } else {
          request = axios({
            method: type,
            url: url,
            params: data,
            cancelToken: new CancelToken(function executor (c) {
              Vue.$httpRequestList.push(c)
            })
          })
        }
      } else {
        if (type === 'post') {
          request = axios({
            method: type,
            url: data ? `${url}/${data}` : url,
          }, {
            cancelToken: new CancelToken(function executor (c) {
              Vue.$httpRequestList.push(c)
            })
          })
        } else {
          request = axios({
            method: type,
            url: data ? `${url}/${data}` : url,
            cancelToken: new CancelToken(function executor (c) {
              Vue.$httpRequestList.push(c)
            })
          })
        }
      }
    }
    request.then(response => {
      if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
        if (response.data.code === 301) {
          if (Vue.$httpRequestList.length > 0) {
            Vue.$httpRequestList.forEach((item) => {
              item()
            })
            Vue.$httpRequestList = []
          }
          removeToken()
        } else if (response.data.code === 200) {
          resolve(response.data)
        } else {
          
        }
      } 
    }, err => {
      reject(err)
    }).catch((error) => {
      reject(error)
    })
  })
}

3、接口

import fetch from '../utils/fetch' //将第二步的文件引入
// 登录
const login = data => fetch('/login', data, 'form')
export default {
  login
}

4、调用

import loginService from '@/api/loginService'
async login(data) {
      const res = await loginService.login(data);
      if (res.code == 200) {
        // do.....
      }
    }