目录前言axiOS请求封装请求拦截和响应拦截接口的请求总结前言 对于三者放在Service.js中封装,方便使用 axios.create 的作用是创建一个新的
对于三者放在Service.js中封装,方便使用
axios.create
的作用是创建一个新的 axios
实例,该实例可以具有自定义配置。通过使用 axios.create
,您可以为任何 api 生成一个客户端,并在使用同一客户端的任何调用中重复使用相同的配置。这使得在应用程序中使用多个 API 时更加方便,因为您可以为每个 API 创建一个单独的实例,并在每个实例中设置不同的配置。
axios.create
方法接受一个配置对象作为参数,该对象包含以下属性:
例如,以下代码创建了一个新的 axios 实例,并将其配置为使用 /api/
作为基本 URL:
const instance = axios.create({
baseURL: '/api/'
});
// 用create创建axios实例
const Service = axios.create({
timeout: 3000,
baseURL: 'http://127.0.0.1:8888/api/private/v1/',
headers: { 'Content-type': 'application/JSON;charset=utf-8' }
})
// get 数据请求封装
export const get = config => {
return Service({
...config,
method: 'get',
data: config.data,
})
}
// post 数据请求封装
export const post = config => {
return Service({
...config,
method: 'post',
data: config.data,
})
}
在 vue3 中,可以使用 Axios 库来进行 HTTP 请求。Axios 库提供了请求拦截器和响应拦截器,以便在请求发送和响应返回时执行一些操作。
请求拦截器可以用于在请求发送前执行一些操作,例如添加 token、设置请求头等。响应拦截器可以用于在响应返回后执行一些操作,例如处理错误信息、剥离无效数据等。
let loadinGobj = null;
// 请求拦截,增加loading,对请求统一处理
Service.interceptors.request.use((config) => {
loadingObj = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
return config;
})
// 相应拦截,对返回值做同意处理
Service.interceptors.response.use(response => {
loadingObj.close();
const data = response.data;
if (!data.data) {
ElMessage.error(data.meta.msg || '服务器错误')
}
else {
ElMessage({
message: '登录成功',
type: 'success',
duration: 1500
})
}
return response.data;
}, error => {
loadingObj.close();
ElMessage({
message: '服务器错误',
type: 'error',
duration: 2000
})
})
import { get, post } from './service'
// 登录数据请求
export const loginAPI = data => {
return post({
url: '/login',
data
})
}
到此这篇关于Vue3中axios请求封装、请求拦截与相应拦截的文章就介绍到这了,更多相关Vue3 axios请求封装、拦截内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue3中axios请求封装、请求拦截与相应拦截详解
本文链接: https://www.lsjlt.com/news/213391.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0