axios的简单封装与使用
发布时间
阅读量：
阅读量
这段文本主要介绍了如何对Axios进行封装以及如何使用封装后的请求处理接口来管理向服务器发送的接口方法。具体来说：
在src/utils目录下创建了一个request.js文件，对Axios进行了封装
包装的内容包括：
- 创建Axios实例并设置基地址和超时值
- 添加请求拦截器
- 添加响应拦截器（用于处理500错误）
在src/api目录下创建了一个index.js文件，使用封装后的request函数发送GET请求到指定路径
展示了如何在组件（如NavBar.vue）中使用该API接口来获取数据
总结为：展示了如何将Axios库进行封装以简化管理向服务器发送的接口方法
axios的简单封装
将...放置于src目录中，并在此目录中生成一个request.js文件。具体代码见下文。
import axios from 'axios';
export function request(config) {
// axios实例
const instance = axios.create({
baseURL: import.meta.env.VITE_APP_API_BASEURL,
timeout: 5000,
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
if (error.response){
if (error.status == 500) {
alert('服务器内部发生错误！')
}
}
return Promise.reject(error);
});
// 发送一个真正的请求
return instance(config)
}封装的request的简单使用
在src目录中创建一个API子目录，并对该子目录负责协调所有向服务器发送请求的任务，在其内部构建一个新的index.js文件以实现上一节所述分类请求接口的功能，并对该部分进行优化和调整
import { request } from "@/utils/request.js"
// http://39.107.140.236/api/categorys/
export function getCategory(){
return request({
url: '/categorys/',
method: 'get'
})
}在组件中采用接口协议进行数据交互和功能实现
在layout目录下的NavBar.vue组件当中使用, 如下所示：
<script setup>
import { reactive } from "vue"
import { getCategory } from "../api";
const categoryDatas = reactive([])
getCategory().then(res => {
if (res.status == 200) {
res.data.forEach(element => {
categoryDatas.push(element)
});
}
})
</script>全部评论 (0)
还没有任何评论哟~