axios的二次封装

最新推荐文章于 2022-11-17 19:51:41 发布

看路向阳

最新推荐文章于 2022-11-17 19:51:41 发布

阅读量349

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/kanlu0417/article/details/122243863

版权

该博客介绍了如何对axios进行二次封装，包括设置基础URL、超时时间，以及请求和响应拦截器的使用。在请求拦截器中，添加了Token处理和加载提示，响应拦截器则处理了错误信息，并统一了后端返回的数据结构。此外，还分享了个人博客链接。

摘要由CSDN通过智能技术生成

// axios 二次封装
import axios from 'axios'
import { Toast } from 'vant'

// 基本url
const baseURL = process.env.NOOE_ENV === 'development' ? 'http://rap2api.taobao.org/app/mock/294536/' : '真实接口url'

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

// 请求拦截
service.interceptors.request.use(config => {
  // 添加Token拦截
  // ...Token

  // 显示提示: 加载中...
  Toast.loading({
    message: '加载中...',
    duration: 0
  })

  return config
})

// 相应拦截
service.interceptors.response.use(response => {
  // 关闭提示
  // Toast.clear()

  // 判断处理响应数据
  if (response.status >= 200 && response.status < 300) {
    // 获取从后端响应回前端的数据对象
    const resData = response.data
    // 从后端返回的数据结构统一为 {code, data}
    if (resData.code === 200) {
      return resData.data
    }
  }

  const err = new Error('请求出现异常')
  err.error = response // 添加一个自定义的属性, 表示具体的错误属性
  return Promise.reject(err)
})

// 导出
export default service

个人博客： zheng-zhihan.gitee.io