在VUE项目中做一个简单的Axios二次封装及使用
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
封装
首先我确定一个封装的位置
utils / request.js
然后我们看到文档，我们可以自定义配置一个 axios 的实例 axios.create(【config】)，该新建的 axios 可以使用其对应的方法。这个也就是叫做 axios 的二次封装了，可以方便我们在页面发起请求，更为方便地管理我们的网络请求模块。
如下是我的具体的封装代码
// 引入
import axios from 'axios'
// 创建实例
const RMhttp = axios.create({
baseUrl: "http://localhost:8080", // 基地址
timeout: 5000 // 超时时间
})
export default RMhttp // 将该实例对外暴露然后我开始配置拦截器
// 引入
import axios from 'axios'
// 创建实例
const RMhttp = axios.create({
baseUrl: "http://localhost:8080", // 基地址
timeout: 5000 // 超时时间
})
// 配置拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default RMhttp // 将该实例对外暴露这样就完成了一个很简单的封装，接下来使用该实例，我新建了一个文件夹来管理我的网络请求api的接口
// 导入实例
import RMhttp from '../utils/request.js'
// 封装请求接口
export const getUserInfo = () => {
// 这里会返回一个promise对象
return RMhttp.get('/user/getUserInfo')
}这样我在其它页面中使用起来就十分方便了，因为其返回的是一个 Promise
async fetchUserInfo() {
const res = await getUserInfo()
this.data.userInfo = res.data
}结语
今天是考研的第一天，希望电子科技小组的学长学姐都顺顺利利??
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-12-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录