小兔鲜封装axios

qq_50526206

已于 2022-07-12 13:03:07 修改

阅读量397

点赞数

文章标签：前端 javascript 开发语言

于 2022-07-12 00:32:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_50526206/article/details/125734456

版权

本文详细介绍了如何在前端项目中封装axios库，提升HTTP请求的统一性和效率。通过自定义配置、拦截器和错误处理，实现了更便捷的API调用方式，使开发更加高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios from 'axios'
import store from '@/store/index'
import { Promise } from 'core-js'
import router from '@/router'
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
let request = axios.create({
    baseURL,
    timeout: '5000'
})
request.interceptors.request.use(config => {
    //业务拦截
    //如果本地有token就在请求头中携带 
    if (store.state.user.profile.token) {
        //Bearer 定义token类型
        config.headers.Authorization = `Bearer ${store.state.user.profile.token}`
    }
    //把请求头返回出去
    return config

}), err => {
    return Promise.reject(err)
}
// 响应对象有俩个参数 一个成功一个失败
// 响应成功 把请求的数据你内容 return 给res
request.interceptors.response.use((res) => res.data, (err) => {
    if (err.response && err.response.status === 401) {
        // 给 mutations派发一个空对象把仓库里用户信息清空
        store.commit('user/setUser', {})
        // $router.pa