VUE axios的安装和使用及封装

海澜明月

于 2023-03-05 16:24:34 发布

阅读量104

点赞数

分类专栏： VUE axios的安装和使用及封装文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_48077282/article/details/129347538

版权

VUE axios的安装和使用及封装专栏收录该内容

1 篇文章

订阅专栏

该代码段展示了如何使用axios库进行网络请求配置，包括设置基础URL，内容类型，以及请求和响应拦截器。请求拦截器中，检查本地存储的token并添加到headers中用于认证。响应拦截器处理401未授权的情况，提示用户登录并跳转至登录页面。同时，它还处理错误信息展示。

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

路径src/network/request.js

import axios from ‘axios’;
import {Notify, Toast} from ‘vant’;
import router from ‘…/router’
axios.defaults.baseURL = “http://localhost:3000/users/”; // 关键步骤–填写后台请求统一的地址
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
export function request(config){
const instance = axios.create({
baseURL:‘https://192.168.5.6’,
timeout:5000
});
//请求拦截
instance.interceptors.request.use(config=>{
// 如果API需要认证，在这统一设置
const token = window.localStorage.getItem(‘token’);
if(token) {
config.headers.Authorization = ‘Bearer ‘+token;
}
return config;
}, err=>{
})
//响应拦截
instance.interceptors.response.use(res=>{
return res.data ? res.data : res;
}, err=>{
// 如果没有授权，去login
if(err.response.status == ‘401’) {
Toast.fail(‘请先登录’)
router.push({path:’/login’})
}
// 如果有错误，在这里可以提示
// Notify(err.response.data.errors[Object.keys(err.response.data.errors)[0]][0]);
Notify(err.response.data.errors[Object.keys(err.response.data.errors)[0]][0])
})
return instance(config)
}