uni.request封裝

背景：

　　在此項目基礎上，后台需要增加token進行驗證，token過期自動跳轉到登錄界面。由於前期項目搭建未考慮這種情況，現在需要對每個接口進行重新改造。於是將uni.request進行二次封裝。也方便后期使用。

1. 在common/js下創建一個request.js文件

import store from '@/store/index'
const request = (options) => {
	return new Promise((resolve,reject) => {
		if(options.header) {
			options.header['Authorization'] = 'Bearer ' + uni.getStorageSync('token')
		}else {
			let header = {'Authorization': 'Bearer ' + uni.getStorageSync('token')}
			options.header = header
		}
		console.log(JSON.stringify(options));
		uni.request({
			...options,
			success: (res) => {
				console.log(res);
				if(res.data.status == '403') {
					// 登錄過期跳轉到登錄界面
					uni.showToast({
						title: '登錄超時，請重新登錄！',
						icon: 'none'
					});
					// logOut()
				}
				if(res.data.status == '-1') {
					uni.showToast({
						title: res.data.msg ? res.data.msg : '接口請求失敗！',
						icon: 'none'
					});
				}
				resolve(res)
			},
			fail: (err) => {
				console.log(err);
				console.log(options);
				reject(err)
			}
		})
	})
}

function logOut() {
	// let promise = this.tim.logout();
	// promise.then(res=> {
	const userNames = uni.getStorageSync('userName');
	const passwords = uni.getStorageSync('passWord');
	store.commit('isLogout');
	uni.clearStorage()

	uni.setStorageSync('userName', userNames);
	uni.setStorageSync('passWord', passwords);
	try{
		const jyJPush = uni.requireNativePlugin('JY-JPush');
		jyJPush.deleteJYJPushAlias(
			{
			},
			result => {
				console.log('刪除別名：' + JSON.stringify(result));
				//刪除別名后查看是否
				jyJPush.getJYJPushAlias(
					{
						userAlias: userNames + this.config.PUSH_KEY
					},
					result => {
						console.log('刪除別名后查看是否還有別名存在：' + JSON.stringify(result));
					}
				);
			}
		);
	}catch(err){
		console.log(err)
	}



	uni.reLaunch({
		url: '../login/login'
	});

	// }).catch(err=> {
	//    console.log('退出失敗')
	// });
}
export default request

　　2. 在main.js中掛載到全局

　　

import request from '@/common/js/request.js'
Vue.prototype.request = request

　　3. 調用

this.request({
    url: this.config.GET_LIST_WITH_GROUP + '?receiver=' + this.userData.id,
    methods: 'POST'
}).then((res) => {
    console.log(res)
    // TODO
},err => {
    uni.showToast({
        title: '請求失敗',
        icon: 'none'
    });
})

　　注意：在main.js文件掛載后，在vue文件中可以直接使用this.request調用。但是在nvue文件中，需要在該文件中重新引用后再使用。