如何优雅地封装 axios #

import axios from 'axios'
import { logInfo, redLog, blackLog } from '@/utils'
// 创建一个实例，此后都在此实例上改造
const http = axios.create({
  // timeout: 1000 * 4,
  withCredentials: true,
})
// 请求拦截器
const beforeRequest = config => {
  // 设置 token
  const token = localStorage.getItem('token')
  token && (config.headers.Authorization = token)
  // NOTE  添加自定义头部
  config.headers['my-header'] = 'jack'
  return config
}

http.interceptors.request.use(beforeRequest)

// 响应拦截器
const responseSuccess = response => {
  // eslint-disable-next-line yoda
  // 这里没有必要进行判断，axios 内部已经判断
  // const isOk = 200 <= response.status && response.status < 300
  return Promise.resolve(response.data)
}

const responseFailed = error => {
  const { response } = error
  if (response) {
    // handleError(response)
    logInfo(response)
    // cons error = new Error(response.data.msg)
    return Promise.reject()
  } else if (!window.navigator.onLine) {
    redLog('没有网络')
    return Promise.reject(new Error('请检查网络连接'))
  }
  return Promise.reject(error)
}
http.interceptors.response.use(responseSuccess, responseFailed)

export default {
  get,
}

const http = axios.create({
  withCredentials: true,
  headers: {
    'content-type': 'application/json;charset=UTF-8',
  },
})

const responseSuccess = response => {
  // eslint-disable-next-line yoda
  // 这里没有必要进行判断，axios 内部已经判断
  // const isOk = 200 <= response.status && response.status < 300
  return Promise.resolve(response.data)
}

Vue.prototype.$http = http // 组件中 使用 this.$http 使用

import { MessageBox } from 'element-ui'
export const post = (url, params, confirm = false) => {
  return new Promise((resolve, reject) => {
    if (confirm || confirm.confirm) {
      MessageBox.confirm(confirm.confirm || '确认操作吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          // NOTE 不要使用 {} 包裹 params
          resolve(http.post(url, params))
        })
        .catch(_ => {
          console.log('取消请求')
        })
    } else {
      resolve(http.post(url, params))
    }
  })
}

async postHttp() {
      try {
        const res = await this.$http.post('admin/test', { name: 'jack', age: 24 }, { confirm: '确定发送吗？' })
        console.log(res)
      } catch (error) {
        this.$message(error.msg)
      }
    }

import { Message } from 'element-ui'

const message = ({ data }) => {
  Message({ message: data.msg, type: 'error' })
}
const responseFailed = error => {
  const { response } = error
  if (response) {
    // handleError(response)
    message(response)
    logInfo(response)
    // cons error = new Error(response.data.msg)
    return Promise.reject()
  } else if (!window.navigator.onLine) {
    redLog('没有网络')
    return Promise.reject(new Error('请检查网络连接'))
  }
  return Promise.reject(error)
}

http.interceptors.response.use(responseSuccess, responseFailed)

postHttp2() {
      this.$http.post('admin/test', `{ name: 'jack', age: 24 }`)
      .then(res => {
        console.log(res)
      })
    }

this.$http.getNoError().then()

new CancelToken(c => {
  this.cancel = c
})

function CancelToken(fn) {
  if (typeof fn !== 'function') {
    throw new TypeError('executor must be a function.')
  }

  var resolvePromise
  // NOTE 添加一个 promise 实例
  this.promise = new Promise(function promiseExecutor(resolve) {
    // 函数
    resolvePromise = resolve
  })

  var token = this
  fn(function cancel(message) {
    if (token.reason) {
      // Cancellation has already been requested
      return
    }
    token.reason = new Cancel(message)
    resolvePromise(token.reason)
  })
}

let resole = null
const cancel = new CancelToken(onResoled => {
  resole = onResoled
})

resolve()
// 等同一执行
cancel.promise.then(message => {
  //
})

let myPromise = null
function myXHR() {
  const promise = new Promise(resolve => {
    resole()
  })
  myPromise = promise
  return promise
}

// 可以这样执行
myXHR().then(res => {})
// 也可以
myPromise.then()

config.cancelToken.promise.then(message => {
  reject(message) // reject 是 xhr 的，而 message 是 cancel 函数传入的。
})

function xhrAdapter(config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
    let request = new XMLHttpRequest()
    if (config.cancelToken) {
      config.cancelToken.promise.then(function onCanceled(cancel) {
        // 取消请求
        request.abort()
        reject(cancel)
        // Clean up request
        request = null
      })
    }
  })
}

// NOTE 用于记录重复的请求
let repeatRequests = {}

function generateRequestKey(config) {
  const { method, url, params, data } = config
  const split = '---'
  const array = [`url:`, url, `${split}method:`, method]
  params && array.push(`${split}params:`, qs.stringify(params))
  data && array.push(`${split}data:`, typeof data === 'object' ? JSON.stringify(data) : data)
  return array.join('')
}

function addPendingRequest(config) {
  const requestKey = generateRequestKey(config)
  config.cancelToken = new axios.CancelToken(cancel => {
    !repeatRequests[requestKey] && (repeatRequests[requestKey] = [])
    repeatRequests[requestKey].push(cancel)
  })
  return config
}
// 请求拦截器
const beforeRequest = config => {
  // NOTE 记录请求
  addPendingRequest(config)
  return config
}

http.interceptors.request.use(beforeRequest)

function removePendingRequest(config) {
  const requestKey = generateRequestKey(config)
  const needCancel = repeatRequests[requestKey]?.length > 1
  if (needCancel) {
    // 不重复，不取消
    repeatRequests[requestKey].forEach(cancel => {
      cancel(requestKey)
    })
  }
  needCancel ? (repeatRequests[requestKey] = []) : (repeatRequests = {})
}
// 响应拦截器
const responseSuccess = response => {
  removePendingRequest(response.config)
  return Promise.resolve(response.data)
}