Vue3.0是目前比较流行的前端框架之一，而axios则是目前比较常用的前端数据请求工具。 axios是基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。Vue3.0在封装axios方面也有很多值得我们学习的思路和方法。本篇文章将从多个方面对Vue3.0中axios的封装做出详细阐述。
一、安装和初始化axios
在使用Vue3.0中的axios之前，我们需要先安装axios。可以通过npm进行安装：
npm install axios --save
然后在main.js中，我们可以将axios挂载到Vue的原型链上，这样我们在组件中就可以通过this.$axios来使用axios
//在main.js中
import axios from 'axios'
import App from './App.vue'
import router from './router'
Vue.prototype.$axios = axios
new Vue({
el: '#app',
router,
components: { App },
template: ''
})二、axios的全局配置
在Vue3.0中，我们可以通过axios.create()方法创建一个axios实例，并配置一些全局属性。例如设置请求的基本URL，设置请求头等等。 在main.js中可以这样配置：
//在main.js中
import axios from 'axios'
import App from './App.vue'
import router from './router'
const http = axios.create({
baseURL: 'http://api.example.com/'
})
//可以设置请求头
http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
Vue.prototype.$http = http
new Vue({
el: '#app',
router,
components: { App },
template: ''
})三、axios的拦截器
拦截器是axios中非常重要的功能之一，可以在请求发出前和响应返回前进行拦截，用来处理请求或响应的一些共性操作。 Vue3.0中提供了一种捕获全局错误并把错误信息反馈给用户的方式，使用axios拦截器可以很容易地实现这样的功能。
const http = axios.create({
baseURL: 'http://api.example.com/'
})
//添加请求拦截器
http.interceptors.request.use(function (config) {
//在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//添加响应拦截器
http.interceptors.response.use(function (response) {
//对响应数据做点什么
return response;
}, function (error) {
//如果捕获到了401状态码，说明登录过期或者未登录，就可以弹出登录框，请用户重新登录
if (error.response.status === 401) {
//弹出登录框逻辑
}
// 对响应错误做点什么
return Promise.reject(error);
});四、封装axios的request方法
在使用axios进行请求的时候，我们可以根据需要在组件中多次调用，但这样会将一些公共的请求参数反复写入组件。我们可以将这些共性操作封装在一个request方法中，方便多次使用。例如：
//在api.js中
import axios from "axios";
const instance = axios.create({
baseURL: "http://api.example.com",
timeout: 10000
});
const request = async (options) => {
try {
const response = await instance(options);
return response.data;
} catch (error) {
console.error(error);
}
};
export { request, instance };在组件中直接引入并使用：
//在组件中
import { request } from "@/api";
const getUser = async () => {
const data = await request({
method: "get",
url: "/users",
params: {
id: 1,
},
});
console.log(data);
};总结
本篇文章通过多个方面对Vue3.0中axios的封装做出详细阐述。首先介绍了axios的安装和初始化，然后引入了全局配置和拦截器两种功能，最后介绍了将多次使用的请求封装在一个request方法中的技巧。通过这些方式，我们可以更加简便地使用axios，并可以进行一些全局的错误处理、基础URL配置等功能。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/240171.html
微信扫一扫 
支付宝扫一扫 