axios数据封装导出

最新推荐文章于 2024-07-25 22:35:58 发布

luoxindong

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/luoxindong/article/details/104353097

版权

本文详细介绍了如何在项目中使用axios库进行API请求，包括配置axios实例、拦截器的设置、错误处理以及封装通用的请求方法。同时，文章探讨了如何将获取到的数据进行处理和导出，以便于在应用中灵活使用。

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

import axios from 'axios'
import JSONBIGINT from 'json-bigint'
import store from '@/store'
import router from '@/router'
// axios支持4个功能：
// 1. js最大安全数值处理
// 2. 头部需要携带token
// 3. 统一剥离无效数据，得到data
// 4. token失效，刷新token
const instance = axios.create({
  // 基准地址
  baseURL: 'http://ttapi.research.itcast.cn/',
  // 格式转换  json-bigint
  transformResponse: [data => {
    // data 是原始的响应数据（json字符串|null）
    try {
      return JSONBIGINT.parse(data)
    } catch (e) {
      return data
    }
  }]
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 修改配置（头部需要携带token）
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}, err => {
  // axios错误一定需要返回一个错误的promise对象
  return Promise.reject(err)
})

// 响应拦截器 （响应成功：剥离无效数据，响应失败：刷新token）
instance.inter