axios封装

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

哦豁*

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

阅读量202

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62351236/article/details/122291959

版权

本文介绍了在Vue.js项目中对axios进行封装的原因和步骤。通过封装，可以便捷地管理和修改请求域名，简化大型项目的维护工作。首先在src/utils/http.js中创建axios实例并设置基础URL和超时时间，然后添加请求和响应拦截器处理权限验证和不同状态码的响应。接着在request.js文件中创建请求接口方法。这样，当需要更改域名时，只需在request.js中统一修改即可。

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

为什么要对axios进行封装
可以更方便的管理和修改axios请求域名，假设是一个庞大的项目，只是修改域名就会花费很多的时间和精力，如果对axios进行封装，便能省去了喝多的步骤
第一步：
首先在开始之前，先安装axios插件

在src目录下创建utils文件夹，里面创建一个http.js文件，文件内容如下：
// 首先引入axios插件
import axios from “axios”;
// 引入element-plus插件
import { ElMessage } from ‘element-plus’
// 网址是后台管理系统的接口
const http = axios.create({
baseURL: “https://www.liulongbin.top:8888/api/private/v1”,
timeout: 10000
})

// 请求拦截
http.interceptors.request.use(config => {
let token = localStorage.getItem(‘token’) || ‘’
config.headers.Authorization = token
return config
}, err => {
throw new Error(err)
})

// 响应拦截
http.interceptors.response.use(res => {
// status 是返回的状态码 msg 是返回状态码的信息
let { status, msg } = res.data.meta
switch (status) {