uni拦截器

// common/request.js

// 目前没有针对uni的Fly版本,使用wx版本没有问题
import store from '@/store'
import config from './config.js'
import Base64 from './base64.js'
// H5版本
// #ifdef H5
import Fly from "flyio/dist/npm/fly"
// #endif

//微信小程序和APP版本
// #ifndef H5
import Fly from "flyio/dist/npm/wx"
// #endif

const request = new Fly();
let base64 = new Base64()

request.interceptors.request.use((request) => {
	request.baseURL = config.baseURL;

	const token = store.state.user.token;

	request.headers['Authorization'] = `Basic ${base64.encode(`${config.clientId}:${config.clientSecret}`)}`;

	if (token) {
		request.headers['Blade-Auth'] = 'bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
	} else {
		request.headers['Tenant-Id'] = config.tenantId
	}

	if (request.method === 'POST' && request.headers['Content-Type'] !== 'multipart/form-data') {
		request.body = {
			...request.body,
			_t: Date.parse(new Date()) / 1000
		}
	} else if (request.method === 'GET') {
		request.params = {
			_t: Date.parse(new Date()) / 1000,
			...request.params
		}
	}
	uni.showLoading({
		title: '正在努力加载中...'
	});
	return request
})
request.interceptors.response.use(function(response) { //不要使用箭头函数,否则调用this.lock()时,this指向不对 
	uni.hideLoading();
	let errmsg = '';
	const data = response.data;
	if (!data || typeof data !== 'object') {
		errmsg = '服务器响应格式错误';
		uni.showToast({
			title: errmsg,
			icon: 'none'
		})
	} else {
		const errno = data.errno;
		switch (errno) {
			case 1001:
				// 数据检验未通过
				for (let i in data.data) {
					errmsg += data.data[i] + ';'
				}
				break;
			default:
				errmsg = data.errmsg;
				break
		}
		if (errmsg && errno !== 0) {
			uni.showToast({
				title: errmsg,
				icon: 'none'
			})
		}
		if (errmsg !== '' && errno === 0) {
			uni.showToast({
				title: errmsg,
				icon: 'none'
			})
		}
	}

	return response.data; //只返回业务数据部分
}, function(err) {
	// console.log("error-interceptor:" + JSON.stringify(err))
	uni.hideLoading();
	let errmsg = err.message;
	switch (err.status) {
		case 0:
			errmsg = "网络连接错误";
			uni.showToast({
				title: errmsg,
				icon: 'none'
			})
			break;
		case 400:
			uni.showToast({
				title: err.response.data.msg,
				icon: 'none'
			})
			break;
		case 401:
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由,也就是最后一个打开的页面路由
			if(curRoute.indexOf('registerLogin') != -1){
				return
			}
			uni.showModal({
				title: '提示',
				content: '当前登录已过期,是否重新登录',
				cancelText: '退出系统',
				confirmText: '重新登录',
				success: (res) => {
					if (res.confirm) {
						store.dispatch('refreshToken').then((res) => {
							console.log(res)
							if (res.access_token) {
								setTimeout(() => {
									uni.switchTab({
										url:'/pages/tabbar/home/home'
									})
								})
							} else {
								store.dispatch('LogOut');
								uni.reLaunch({
									url: '/pages/public/registerLogin/registerLogin'
								})
							}
						})
					} else if (res.cancel) {
						store.dispatch('LogOut');
						plus.runtime.quit();
					}
				}
			});
			break;
		default:
			uni.showToast({
				title: errmsg,
				icon: 'none'
			})
	}

})

export default request
export {
	request
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp拦截是一种用于拦截和处理网络请求的机制。通过使用拦截,我们可以在发送请求之前和接收响应之后对请求进行一些处理,例如添加请求头、处理错误信息等。在uniapp中,我们可以使用uni.request方法进行网络请求,但是每次请求都需要按照一定的格式来编写代码,这样会导致代码冗余并且难以维护。为了解决这个问题,我们可以对uni.request进行二次封装,实现拦截的功能。 以下是一个示例,演示了如何在uniapp中封装请求拦截: ```javascript // 创建一个拦截对象 const interceptor = uni.request.interceptors; // 添加请求拦截 interceptor.request.use((config) => { // 在发送请求之前做一些处理,例如添加请求头 config.header.Authorization = 'Bearer token123'; return config; }, (error) => { return Promise.reject(error); }); // 添加响应拦截 interceptor.response.use((response) => { // 在接收响应之后做一些处理,例如处理错误信息 if (response.statusCode !== 200) { uni.showToast({ title: '请求失败', icon: 'none' }); } return response; }, (error) => { return Promise.reject(error); }); // 发送网络请求 uni.request({ url: '/api/public/v1/home/catitems', method: 'GET', success: (res) => { console.log(res.data); }, fail: (err) => { console.log(err); } }); ``` 通过上述代码,我们可以看到拦截的使用过程。首先,我们创建了一个拦截对象,然后使用interceptor.request.use方法添加了一个请求拦截,该拦截在发送请求之前会添加一个请求头。接着,我们使用interceptor.response.use方法添加了一个响应拦截,该拦截在接收响应之后会检查响应的状态码,如果不是200,则显示一个请求失败的提示。最后,我们使用uni.request方法发送网络请求,并在success和fail回调函数中处理响应结果和错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值