uniapp request请求封装包含token兼容多端，简单易用

1、首先我们在新建好的uniapp项目中新建一个文件夹common，再建一个request.js文件

2. 在request.js放入以下代码

var apiUrl = ''; //放入后台接口的url

// #ifdef H5
var baseUrl = '';
if (process.env.NODE_ENV === 'development') {
	//本地环境，即开发环境
	baseUrl = '/api'
} else {
	//线上环境
	baseUrl = apiUrl
}
// #endif


//封装request请求
const sendRequest = (url, method = 'GET', data = {}, contentType) => {
	//判断header提交数据类型
	let types = '';
	if (method == 'POST' && !contentType) {
		types = 'application/x-www-form-urlencoded'
	} else if (method == 'POST' && contentType) {
		types = contentType
	} else {
		types = 'application/json';
	}

	// #ifdef H5
	var bases = baseUrl + '/' + url;
	// #endif
	
	// #ifndef H5
	var bases = apiUrl + '/' + url;
	// #endif

	var token = uni.getStorageSync('token') || '';
	return new Promise(function(resolve, reject) {
		uni.request({
			url: bases,
			data: data,
			method: method,
			header: {
				'Content-Type': types,
				'Accept': 'application/json, text/javascript, */*; q=0.01',
				'Authorization': token
			},
			success(res) {
				if (res.header.authorization || res.header.Authorization) {
					uni.setStorageSync('token', res.header.authorization || res.header.Authorization);
				} 
				var code = res.statusCode;
				switch (code) {
					case 401:
						uni.showModal({
							title: '登录提示',
							content: '身份已过期，请重新登录后再来操作！',
							success:ress => {
								if (ress.confirm) {
									uni.redirectTo({
										url:'/pages/WxLogin/Accredit'
									})
								}
							}
						})
						break;
					default:
						resolve(res);
						break;
				}
			},
			fail(err) {
				reject(err);
			}
		})
	})
}

module.exports.sendRequest = sendRequest

3、在main.js中全局挂载

import Vue from 'vue'
import App from './App'
import http from './common/js/request.js'


Vue.config.productionTip = false

Vue.prototype.$urls = ""; //线上url接口
Vue.prototype.$http = http;

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

4、在页面中使用

get方法

//url-后台接口
//data-参数，传递给后台的参数
this.$http.sendRequest(url, 'GET', {
				data:data
}).then(res => {
	//成功回调
}).catch(err => {
    //请求失败
    console.log(err)
})

POST方法

//url-后台接口
//data-参数，传递给后台的参数
this.$http.sendRequest(url,'POST',{
					data：data
				}).then(res => {
					//成功回调
				}).catch(err => {
					//请求失败
				})

有疑问或建议的欢迎在下方留言