关于Axios二次封装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

一、特性

• 在浏览器中是对 XMLHttpRequest 的封装（ajax）

• 支持 Promise 风格(.then() / .catch())

• 拦截请求和响应(节省在发送请求和处理响应时的重复代码书写)

• 能够自动实现请求、响应数据格式的转换

• 能够取消未完成请求

• 保证安全（客户端支持防御 XSRF）

• ......

二、使用

axios
  .get('https://jsonplaceholder.typicode.com/todos')
  .then(response => {
    console.log('成功：', response)
    // response 中返回的是经过包装的响应结果
    // 后端返回的数据在 response.data 属性中
    if (response.status === 200) {
      console.log('后端数据：', response.data)
    }
  })
  .catch(err => {
    console.error('失败：', err)
  })

axios 中提供一系列的请求方法，如：get()、post()、put()、delete() 等，用于发送对应方法的请求。

    // 创建 axios 实例
    const request = axios.create({
      baseURL: 'https://jsonplaceholder.typicode.com', // 基准 URL，即每个 API 接口都有的前缀
      timeout: 10000, // 超时时间
    })
    // 请求拦截器
    // request.interceptors.request.use()
    // 响应拦截器
    request.interceptors.response.use(response => {
      if (response.status === 200) {
        return response.data
      }
    })

    // 请求接口资源
    request.get('/todos').then(data => console.log('todos:', data))
    request.get('/posts').then(data => console.log('posts:', data))

三、二次封装

import axios from 'axios'

// 区别开发环境与生产环境下不同的 baseURL
// 在 vite 环境下，利用 import.meta.env 获取环境变量对象，对象中有
// MODE 属性表示环境模式，development-开发模式, production-生产模式
// const baseURL = import.meta.env.MODE === 'development' ? '开发环境下的基准url' : '生产环境下的基准url'
// 也可以根据 import.meta.env.DEV 判断是否为开发模式, import.meta.env.PROD 判断是否为生产模式
// const baseURL = import.meta.env.MODE === 'development' ? 'http://162.14.108.31:5945' : '生产环境下的基准url'

const baseURL = ''

// 另外还有 webpack 环境下，利用 process.env.NODE_ENV 来判断环境模式

// 如果本地开发服务器中有配置反向代理 proxy，则通常 baseURL 中的 协议、域名、端口就可以不用设置

/**
 * 创建 axios 实例
 */
const service = axios.create({
  baseURL, // 基准 url
  timeout: 10000, // 超时时间
})

/**
 * 请求拦截
 */
service.interceptors.request.use((config) => {
  // 在请求头中添加 token 认证字段的值
  // token 的获取还需要在登录成功后获得到真实的 token 数据
  // 用户登录成功后是将 token 保存到了 sessionStorage 中，所以在请求
  // 发送时先从 sessionStorage 中获取本地保存的 token 数据
  const token = sessionStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }

  return config
}, (error) => {
  // 统一进行错误处理
  console.error('请求出现异常:', error)
})

/**
 * 响应拦截
 */
service.interceptors.response.use((response) => {
  // response.status 中保存的是 HTTP 响应的状态码
  if (response.status >= 200 && response.status < 300) {
    // 从响应对象中获取后端返回的响应数据
    const {code, data, message, ...rest} = response.data
    // 如果 code 为 200，则表示正常成功操作
    if (code === 200) {
      return data || rest
    } else {
      // TODO: 还有 token 异常的响应处理


      return Promise.reject(new Error(message))
    }
  }
}, (error) => {
  // 统一进行错误处理
  console.error('请求出现异常:', error)
})

export default service