uniapp ts vue3封装请求拦截
时间: 2023-11-11 18:04:28 浏览: 137
好的,关于uniapp ts vue3封装请求拦截,你可以按照以下步骤进行:
1. 在src目录下创建一个utils文件夹,并在该文件夹下创建一个request.ts文件,用于封装请求拦截器。
2. 在request.ts文件中引入axios和qs,并创建一个axios实例,具体代码如下:
```
import axios from 'axios';
import qs from 'qs';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // 后端接口地址
timeout: 5000 // 请求超时时间
});
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
if (config.method === 'post') {
config.data = qs.stringify(config.data);
}
return config;
},
error => {
// 对请求错误做些什么
console.log(error); // for debug
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data;
},
error => {
// 对响应错误做点什么
console.log('err' + error); // for debug
return Promise.reject(error);
}
);
export default service;
```
3. 在需要使用请求拦截器的页面中,引入刚才创建的request.ts文件,并使用相关方法进行请求,具体代码如下:
```
import request from '@/utils/request';
export function login(data: any) {
return request({
url: '/user/login',
method: 'post',
data
});
}
```
这样就完成了uniapp ts vue3封装请求拦截的过程。
阅读全文