vue3中封装axios请求最新实现步骤
作者：尔嵘
这篇文章主要给大家介绍了关于vue3中封装axios请求的最新实现步骤,在Vue 3中可以通过封装axios来实现接口的统一管理和调用,文中通过代码介绍的非常详细,需要的朋友可以参考下
在 Vue3 中，可以使用 axios 库进行网络请求，并将其封装到一个自定义的函数中以便全局使用。具体实现步骤如下：
1.安装 Axios：可以通过 npm 或 yarn 安装 axios 库。
npm install axios # 或者 yarn add axios
2.创建一个 axios 实例并设置默认配置项和拦截器，该文件取名叫request.js
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// request 拦截器
service.interceptors.request.use(
config => {
// 在这里可以设置请求头、请求参数等return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// response 拦截器
service.interceptors.response.use(
response => {
// 在这里处理返回数据const { data } = response
if (data.code !== 200) {
console.error('Error:', data.message)
return Promise.reject(newError(data.message || 'Error'))
} else {
return data
}
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// 封装具体的请求方法: 四种请求类型不和下面的3和4标题内容放在一起
export const get = (url, params) => {
return service .get(url, { params });
};
export const post = (url, data) => {
return service .post(url, data);
};
export const put = (url, data) => {
return service .put(url, data);
};
export const delete= (url, data) => {
return service .delete(url, data);
};
export default service在上述代码中，我们创建了一个名为 service 的 axios 实例，并设置了一些默认的配置项和拦截器。其中，request 拦截器用于请求发送前对请求做一些处理，例如设置请求头、请求参数等；response 拦截器用于对返回数据进行处理，例如根据接口返回的状态码判断请求是否成功等。
3.将 axios 封装到一个函数中，api.js
import service from '@/utils/request'
export function request(config) {
return service(config)
}在上述代码中，我们将 axios 封装到一个名为 request 的函数中，并导出该函数，以便在其他地方可以直接调用。
4.在代码中使用封装好的 axios 请求
import { request } from '@/api'
request({
url: '/user',
method: 'get'
}).then(response => {
console.log(response)
})5.结合request.js中四种请求，代替上面3和4标题
import { get, post,put, delete } from '@/utils/request';
// 发送GET请求的示例
get('/users', { id: 1 })
.then((response) => {
// 处理响应数据
console.log(response);
})
.catch((error) => {
// 处理请求错误
console.error(error);
});
// 发送POST请求的示例
post('/users', { name: 'John', age: 25 })
.then((response) => {
// 处理响应数据
console.log(response);
})
.catch((error) => {
// 处理请求错误
console.error(error);
});在上述代码中，我们引入封装好的 request 函数，并通过传递一个包含请求参数的配置对象来发起网络请求。
总结
需要注意的是，在实际应用中，我们可能还需要根据业务需求进一步封装不同类型的请求，例如 GET 请求、POST 请求、PUT请求、DELETE等，以及处理请求错误等情况。
到此这篇关于vue3中封装axios请求的文章就介绍到这了,更多相关vue3封装axios请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！