详解 axios 中封装使用、拦截特定请求、判断所有请求加载完毕

封装 Axios

Axios 是一款基于 Promise 的 HTTP 请求库，让我们在浏览器端和 Node.js 中发起 HTTP 请求变得非常容易。但是，为了更好的使用和维护，我们需要对 Axios 进行封装。

我们可以将 Axios 封装成一个单独的模块，该模块会创建一个新的 Axios 实例，设置默认配置，封装公共的请求逻辑和错误处理，然后将封装后的 Axios 实例导出。

以下是一个简单的封装示例：

import axios from 'axios'
import config from '@/config'

const request = axios.create({
  baseURL: config.baseURL,
  timeout: config.timeout,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器
request.interceptors.request.use(config => {
  // 在请求发送之前做些什么，例如加入 Token
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
request.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error)
})

export default request

拦截特定请求

在开发中，我们经常会遇到需要拦截某些特定的请求，如请求超时、请求错误等。为了实现这些功能，Axios 提供了拦截器机制。

以下是针对请求超时和请求错误的特定请求拦截器示例：

import axios from 'axios'
import config from '@/config'

const request = axios.create({
  baseURL: config.baseURL,
  timeout: config.timeout,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器
request.interceptors.request.use(config => {
  // 在请求发送之前做些什么，例如加入 Token
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
request.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data
}, error => {
  // 对响应错误做些什么
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '请求错误'
        break
      case 401:
        error.message = '未授权，请登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = `请求地址出错: ${error.response.config.url}`
        break
      case 408:
        error.message = '请求超时'
        break
      case 500:
        error.message = '服务器内部错误'
        break
      case 501:
        error.message = '服务未实现'
        break
      case 502:
        error.message = '网关错误'
        break
      case 503:
        error.message = '服务不可用'
        break
      case 504:
        error.message = '网关超时'
        break
      case 505:
        error.message = 'HTTP版本不受支持'
        break
      default:
    }
  }
  return Promise.reject(error)
})

export default request

注意，在响应拦截器中，我们需要根据响应错误的状态码进行不同的错误处理。

判断所有请求加载完毕

当我们需要在所有的请求都加载完毕后执行某些操作时，可以使用 Axios 提供的并发处理机制。Axios 并发请求返回的是一个 Promise 数组，我们可以使用 Promise.all() 方法将这些 Promise 组合成一个 Promise，然后在 Promise.then() 方法中处理返回的结果。

以下是判断所有请求加载完毕的示例：

import axios from 'axios'
import config from '@/config'

const request = axios.create({
  baseURL: config.baseURL,
  timeout: config.timeout,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器
request.interceptors.request.use(config => {
  // 在请求发送之前做些什么，例如加入 Token
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
request.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data
}, error => {
  // 对响应错误做些什么
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '请求错误'
        break
      case 401:
        error.message = '未授权，请登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = `请求地址出错: ${error.response.config.url}`
        break
      case 408:
        error.message = '请求超时'
        break
      case 500:
        error.message = '服务器内部错误'
        break
      case 501:
        error.message = '服务未实现'
        break
      case 502:
        error.message = '网关错误'
        break
      case 503:
        error.message = '服务不可用'
        break
      case 504:
        error.message = '网关超时'
        break
      case 505:
        error.message = 'HTTP版本不受支持'
        break
      default:
    }
  }
  return Promise.reject(error)
})

// 并发处理多个请求
const requests = [
  request.get('/api/user'),
  request.get('/api/order'),
  request.get('/api/product')
]

Promise.all(requests).then(([user, order, product]) => {
  console.log(user, order, product)
}).catch(error => {
  console.log(error)
})

export default request

以上示例中，我们将三个不同的请求组成一个数组 requests，然后使用 Promise.all() 方法并发处理这些请求，当所有请求加载完毕后，会调用 Promise.then() 方法。