import Axios from 'axios'

const client = Axios.create({
  // 你的配置
})

client.interceptors.response.use(response => {
  // 網(wǎng)上的做法都是讓你直接返回?cái)?shù)據(jù)
  // 這導(dǎo)致后續(xù)的一些功能難以支持
  return response.data
})

export default client

import Axios, { AxiosRequestConfig } from 'axios'

const client = Axios.create({
  // 你的配置
})

export async function request(url: string, config?: AxiosRequestConfig) {
  const response = await client.request({ url, ...config })
  const result = response.data
  // 你的業(yè)務(wù)判斷邏輯
  return result
}

export default client

發(fā)送請(qǐng)求 => 拿到數(shù)據(jù) => 渲染內(nèi)容

import Axios, { AxiosRequestConfig } from 'axios'
import axiosRetry from 'axios-retry'

const client = Axios.create({
  // 你的配置
})

// 安裝 retry 插件
// 當(dāng)請(qǐng)求失敗后，自動(dòng)重新請(qǐng)求，只有3次失敗后才真正失敗
axiosRetry(client, { retries: 3 })

export async function request(url: string, config?: AxiosRequestConfig) {
  const response = await client.request({ url, ...config })
  const result = response.data
  // 你的業(yè)務(wù)判斷邏輯
  return result
}

// 只有3次失敗后才真正失敗
const data = request('http://example.com/test')

import Axios, { AxiosRequestConfig } from 'axios'
import jsonpAdapter from 'axios-jsonp'

const client = Axios.create({
  // 你的配置
})

export async function request(url: string, config?: AxiosRequestConfig) {
  const response = await client.request({ url, ...config })
  const result = response.data
  // 你的業(yè)務(wù)判斷邏輯
  return result
}

export function jsonp(url: string, config?: AxiosRequestConfig) {
  return request(url, { ...config, adapter: jsonpAdapter })
}

// 你現(xiàn)在可以發(fā)送 jsonp 的請(qǐng)求了
const data = jsonp('http://example.com/test-jsonp')

import Axios, { AxiosRequestConfig } from 'axios'

const client = Axios.create({
  // 你的配置
})

client.interceptors.request.use(config => {
  // 最簡(jiǎn)單的方案
  config.url = config.url.replace('{version}', 'v1')
  return config
})

// GET /api/v1/users
request('/api/{version}/users')

import Axios from 'axios'

const CancelToken = Axios.CancelToken

export function withCancelToken(fetcher) {
  let abort

  function send(data, config) {
    cancel() // 主動(dòng)取消

    const cancelToken = new CancelToken(cancel => (abort = cancel))
    return fetcher(data, { ...config, cancelToken })
  }

  function cancel(message = 'abort') {
    if (abort) {
      abort(message)
      abort = null
    }
  }

  return [send, cancel]
}

function getUser(id: string, config?: AxiosRequestConfig) {
  return request(`api/user/${id}`, config)
}

// 包裝請(qǐng)求函數(shù)
const [fetchUser, abortRequest] = withCancelToken(getUser)

// 發(fā)送請(qǐng)求
// 如果上一次請(qǐng)求還沒(méi)回來(lái)，會(huì)被自動(dòng)取消
fetchUser('1000')

// 通常不需要主動(dòng)調(diào)用
// 但可以在組件銷毀的生命周期中調(diào)用
abortRequest()