uniapp 请求封装,拦截器:请求拦截、响应拦截

在这里插入图片描述

全局请求封装

export function http(path, params = {}, loading = true, method = "POST") {
	console.log('%c请求拦截:', ' background:orange', params);
	if (loading) {
		uni.showLoading({
			title: "加载中",
			mask: true
		});
	};

	return new Promise((resolve, reject) => {
		uni.request({
			header: {
				Authorization: uni.getStorageSync("Authorization") || ""
			},
			url: import.meta.env.VITE_BASE_URL + path,
			method,
			data: params,
			async success(res) {
				uni.hideLoading();
				resolve(res.data);
				console.log('响应拦截:', path, params, res.data);
				if (res.data?.code !== 0) {
					uni.showToast({
						icon: "error",
						duration: 2000,
						title: res.data.msg
					});
				}

			},
			fail(err) {
				uni.hideLoading();
				uni.reLaunch({
					url: "/pages/status/service/error"
				})
				reject(err);
			},
			complete() {
				// uni.hideLoading();    // 在showToast之前执行会受影响
			}
		});
	});
};

局部业务接口封装

在这里插入图片描述

使用接口

在这里插入图片描述

  • 47
    点赞
  • 343
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
Uniapp封装请求拦截可以使用uni-app提供的拦截器功能,具体步骤如下: 1. 在common目录下新建一个request.js文件,用于封装请求拦截器。 2. 在request.js文件中定义一个request拦截器,并在其中添加请求头、请求参数等信息。示例代码如下: ``` import Vue from 'vue' import axios from 'axios' import qs from 'qs' axios.defaults.baseURL = 'http://localhost:8080/' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 添加请求拦截器 axios.interceptors.request.use( config => { // 在发送请求之前做些什么 if (config.method === 'post') { config.data = qs.stringify(config.data) } return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } ) export default axios ``` 3. 在main.js文件中引入request.js文件,并将其挂载到Vue原型链上。示例代码如下: ``` import Vue from 'vue' import App from './App' import request from './common/request' Vue.config.productionTip = false // 将request挂载到Vue原型链上 Vue.prototype.$request = request App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 4. 在需要请求数据的组件中,使用this.$request来发送请求即可。示例代码如下: ``` export default { data () { return { dataList: [] } }, mounted () { this.getDataList() }, methods: { async getDataList () { try { const res = await this.$request.get('/api/list') this.dataList = res.data } catch (error) { console.log(error) } } } } ``` 这样,我们就完成了Uniapp封装请求拦截的过程。通过这种方式,我们可以在全局范围内添加请求头、请求参数等信息,从而方便地进行请求处理。
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

美酒没故事°

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值