因 uni-app 的写法跟 vue 的写法是一致的所以这次我打算用 uni-app 开发微信小程序,在开发过程中一般是需要二次封装接口的(当然你可以头铁直接调用接口)

vue 一般是封装 axios 而 uni-app 则是封装 uni.request() 跟微信小程序的请求接口 AIP 是一致的, 好了废话不多说直接来

1.首页在根目录创建文件 api (可以根据自己的喜好创建名称),在 api 文件夹下在创建两个 js 文件, 名称可以自定义, 我这里的名称是 http.js 和 request.js

2.现在我们进入到 request.js 里头 这里用到了 new Promise() 主要用于异步计算 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果,可以在对象之间传递和操作promise，帮助我们处理队列

//  request.js 里面

const fmmUrl = "https://xx.com";  // 这里放自己的接口名称

// get 请求
 function getRequest(url,data) {
 		 let promise = new Promise((resolve,reject) => {
		 let postData = data;
		 // 这里是获取 token 
		 let token = uni.getStorageSync("data")
		 try {
			uni.request({
				url: fmmUrl + url,
						data: postData,
						method: "GET",
						dataType: "json",
						header: {
							"Cookie":`JSESSIONID=${token}`,
							'content-type': 'application/json'
						},
						// 这里请求成功根据自己的 code 判断就好了
						success: res => {
							if (res.data.code == 0) {
								resolve(res.data)
							} else if (res.data.code == -2) {
								resolve(res.data)
							} else if (res.data.code == -1) {
							resolve(res.data)
							} else  {
								resolve(res.data)
							}
						},
						error: e => {
							reject("网络出错")
						}
			});	 			 
		 } catch (e) {
		 	reject(e)
		 }
		
	 });
	 return promise;
 }

// post 请求
 function postRequest(url,data) {
	 let promise = new Promise((resolve,reject) => {
		 let postData = data;
		  // 这里是获取 token 
		 let token = uni.getStorageSync("data")
		 try {
				uni.request({
					url: fmmUrl + url,
						data: postData,
						method: "POST",
						header: {
						"Cookie":"JSESSIONID="+token,
						'content-type': 'application/json'
						},
						// 这里请求成功根据自己的 code 判断就好了
						success: res => {
							if (res.data.code == 0) {
								resolve(res.data)
							} else if (res.data.code == -2) {
								resolve(res.data)
							} else if (res.data.code == -1) {
							resolve(res.data)
							} else  {
								resolve(res.data)
							}
						},
						error: e => {
							reject("网络出错")
						}
				});	 
		 } catch (e) {
			 reject(e)
		 }
	 });
	 return promise
 }

// 最后在底部把写好的方法抛出就好了
export default  {
	postRequest,
	getRequest,
}

3.方法写好了现在去我们的 http.js 文件夹里,这里我统一管理了自己的接口,方便后期维护

// http.js 里面
// 现在引入我们的 request.js
import request from "./request.js"

// 接口
 let getData = function(e){
 	 return request.getRequest("/xx/xxx/xx",e)
 }

// 最下面记得抛出
export default {
	getData 
}

4.这里需要在根目录下的 main.js 引入下载我们的 htpp.js

// 在 main.js 顶部引入一下 http.js
import http from './api/http.js'

// 放到 Vue 原型上面
//Vue.prototype.名称自定义 = http
Vue.prototype.$http = http

5.最后在需要请求接口的页面直接调用即可

<template>
<!--   页面内容   -->
...
</template>

<script>
export default {
	data() {
		return {
		  ...
		}
	},
	onReady(){
		this.indexData()  
	},
	methods:{
	 indexData(){
	 		// 正常请求不传参数
			this.$http.getData()
			.then(res => {
				console.log(res)
			})
			// 带参数
			let data = {
				名称:数据
			}
			this.$http.getData(data)
			.then(res => {
				console.log(res)
			})
		},
	},
}
</script>

<style>
/*  自己的 css 代码  */
</style>

如果有什么问题的地方或者能优化的地方留言区交流