uni-app是最常见的多端开发工具，使用uni-app多端工具可以开发出微信小程序、APP、抖音小程序等端的应用程序。

那么使用uni-app进行数据的请求，又要如何实现呢？

uni-app中数据的请求就不得不说到uni.request方法，本篇文章就来介绍在uni-app开发中如何封装一个通用的请求方法来统一去后台进行数据的请求。

uni-app封装uni.request通用方法流程如下：

一、创建http.js文件

let url = ''
if (process.env.NODE_ENV === 'development') {
	console.log('开发环境')
	url = 'https://xxx.com'  //改成你自己的后台地址
} else {
	console.log('生产环境')
	url = "https://xxx.com"
}
export const baseUrl = url;
let whiteArr = []
export function http(url, data, method = 'GET'，headers) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseUrl + url,
			data,
			header: {
				'content-type': 'application/x-www-form-urlencoded',
				'token': uni.getStorageSync('token') || '',
				...headers
			},
			method,
			success: (res) => {
				if (res.statusCode == 200) {
					if (res.data.code == 200) {
						resolve(res.data)
					}else{
						reject(res.data.code)
					}
				}else {
					uni.showToast({
						title: "接口请求失败" + res.statusCode,
						icon: 'none'
					})
				}
			},
			fail: (res) => {
				uni.showToast({
					title: '服务器请求异常',
					icon: 'none'
				})
			},
			complete: () => {

			}
		});
	})
}

二、main.js文件中设置

// #ifndef VUE3
import Vue from 'vue'
...
import {http} from '@/utils/http.js'
Vue.prototype.$http=http
...
// #endif

三、单页面中使用请求数据

    3.1、get方法

this.$http('/api/index/index',{'id':1}).then(res => {
})

    3.2、post方法

this.$http('/api/index/index',{'id':1},'POST').then(res => {
})

    3.3、设置header参数

this.$http('/api/index/index',{'id':1},'POST',{shop:1}).then(res => {
})

使用注意项：

    1、http.js文件中统一对登录失效等进行拦截处理。

    2、使用缓存token进行token数据的传递和获取。