微信小程序项目中对wx.request()请求封装

本文将讲解uniapp + vue2 和uniapp + vue3 + ts项目框架中分别对wx.request()或者uni.request()请求进行封装。（其实两者封装都差不多，只是语法变化和增加了类型声明）

一、未封装wx.request()请求下，发起请求

1. uniapp + vue3 + ts项目框架下发起请求获取banner图数据

<script setup lang="ts">
    import { onLoad } from "@dcloudio/uni-app"

    onLoad(() => {
		getBannnerList()
	})

    //获取bannner接口
    const getBannnerList = async () => { 
        const res = await uni.request({
			url: 'https://xxxx.com/api/banner',
			method: "GET",
			header: {
				'content-type': 'application/json'
			}
		})
		if (res.data.code === 200) {
			console.log(res.data.banner)
		}
    }
</script>

2. uniapp + vue2 项目框架下发起请求获取banner图数据

<script>
    export default {
		data() {
			return {
                bannerList: []
            }
		},
        onLoad() {
            this.getBannerList()
        },
        methods: {
            //获取banner图
			async getBannerList() {
				const res = await uni.request({
			        url: 'https://xxxx.com/api/banner',
			        method: "GET",
			        header: {
				        'content-type': 'application/json'
			        }
		        })
		        if (res.data.code === 200) {
			        console.log(res.data.banner)
                    this.bannerList = res.data.banner
		        }
			},
        }
    }
</script>

二、uniapp + vue3 + ts框架下封装wx.request()请求

1. 在项目根目录下新建一个request文件夹，文件夹中新建request.ts 和 api.ts文件

2. 在request.ts中利用Promise封装wx.request()请求

// 项目根路径
const BaseUrl = 'https://xxxx.com/api'  


//也可以采用uni.getStorageSync()、uni.request()写法，因为框架用的是uniapp

function request ( url:string, method: "GET" | "POST" | undefined, data: object | any ) {
	return new Promise( function (resolve,reject) {
		//请求头
		let header: any
		if ( wx.getStorageSync('token') !== undefined && wx.getStorageSync('token') !== "" ) {
			header = {
				'content-type': 'application/json',
				'Authorization': wx.getStorageSync('token')
			};
		} else {
            //无token情况
			header = {'content-type': 'application/json'}
		}
		wx.request({
			url: BaseUrl + url,
			method: method,
			data: data,
			header: header,
			success(res:any) {
				if ( res.data.code === 200 ) {
					resolve(res.data);
				} else if (res.data.code === 10002) {
					//token过期
					wx.showModal({
						title: '提示',
						content: '身份信息失效！请重新登录！',
						showCancel: false,
						success(res:any) {
							if (res.confirm) {
								wx.navigateTo({
									url: '/subpkg/login/login'
								})
							} else if(res.cancel){
								wx.setStorageSync("token","")
							}
						}
					})
				} else {
					wx.showToast({
						title: res.data.message,
						icon: "none"
					})
					reject(res.data);
				}
			},
			fail(err:any) {
				wx.showToast({
					title: "无法连接到服务器",
					icon: "none"
				})
				reject(err)
			}
		})
	})
}

export { request ,BaseUrl }

2. 在api.ts中引入request，然后集中式写项目请求方法

import { request } from "./request"

//banner图接口
export const getBannerInfo = () => request( '/banner', "GET",'' )

//商品分类接口
export const getCategoriesInfo = () => request( '/categories', "GET",'' )

//新增/修改地址接口
export const addAddressInfo = (data: object | any) => request( '/bindaddress', "POST", data )

..........
//也可以分类管理

3. 页面上调用请求接口方法，以获取banner图接口为例，其他接口均类似

<script setup lang="ts">
    import { getBannerInfo } from '@/request/api.js'
    import { onLoad } from "@dcloudio/uni-app"

    onLoad(() => {
		getBannnerList()
	})

    //获取bannner接口
    const getBannnerList = async () => { 
        const res = await getBannerInfo()
	    console.log(res)
    }
</script>

二、 uniapp + vue2 框架下封装wx.request()请求

1. 在项目根目录下新建一个request文件夹，文件夹中新建request.js 和 api.js文件

2. 在request.js中利用Promise封装wx.request()请求

const BaseURL = 'https://xxxx.com/api/'

function request (url,method,data) {
	return new Promise (function (resolve,reject) {
		//请求头
		let header = null
		if( wx.getStorageSync('token') !== undefined && wx.getStorageSync('token') !== ''){
			header = {
				'content-type': 'application/json',
				'Authorization': wx.getStorageSync('token')
			}
		}else{
			header = {
				'content-type': 'application/json'
			}
		}
		
		uni.request({
			url: BaseURL + url,
			method: method,
			data: data,
			header: header,
			success(res) {
				if(res.data.code === 200){
					resolve(res.data)
				} else if (res.data.code === 10002) {
					//token过期
					uni.showModal({
						title: '提示',
						content: '身份信息失效！请重新登录！',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								wx.navigateTo({
									url: '/subpkg/login/login'
								})
							} else if(res.cancel){
								wx.setStorageSync("token","")
							}
						}
					})
				} else { 
					wx.showToast({
						title: res.data.message,
						icon: "none",
						duration: 1000
					})
					reject(res.data)
				}
			},
			fail(err) {
				wx.showToast({
					title: "无法连接到服务器",
					icon: "none",
					duration: 1000
				})
				reject(err)
			}
		})
	})
}

export { request , BaseURL}

3. 在api.ts中引入request，然后集中式写项目请求方法

import { request } from "./request"

//banner图接口
export const getBannerInfo = () => request( '/banner', "GET",'' )

//商品分类接口
export const getCategoriesInfo = () => request( '/categories', "GET",'' )

//新增/修改地址接口
export const addAddressInfo = (data) => request( '/bindaddress', "POST", data )

.........
//一样可以分类管理请求接口nfo

4. 页面上调用请求接口方法，以获取banner图接口为例，其他接口均类似

<script>
    import { getBannerInfo } from '@/request/api.js'
    export default {
		data() {
			return {
                bannerList: []
            }
		},
        onLoad() {
            this.getBannerList()
        },
        methods: {
            //获取banner图
			async getBannerList() {
				const res = await getBannerInfo()
                console.log(res)
				this.bannerList = res.banner
			},
        }
    }
</script>

以上就是对微信小程序项目中对wx.request()或者uni.request()请求进行封装，分别讲述了在两种框架下的封装方式，很明显的感觉的封装后的代码更加简洁灵活，仅供参考，谢谢。