uni-app开发微信小程序封装异步请求

为什么要封装

1. 原生的微信小程序请求不支持Promise
2. uni-app的请求不能够方便的添加各种效果，例如加载时的loading
3. uni-app的请求返回值是一个数组，不方便后续添加各种方法

• 在uni-app项目中如需经常发起网络请求，可以为uni.request方法进行二次封装，使代码更加简洁，便于后期修改维护

• 原无封装代码：

onLoad() {
		// 在页面加载时调用
		this.getSwipers()
	},
	methods: {
		getSwipers () {
			// 发送请求
			uni.request({
				url: 'http://localhost:8082/api/getlunbo',
				// 使用监听函数防止this指向改变
				success: res =>{
					// 判断是否成功返回数据
					if(res.data.status !== 0){
						return uni.showToast({
							title: '获取数据失败!'
						})
					}
					// 赋值
					this.swipers = res.data.message
				}
			})
		}
	}

使用

1. 新建api.js，结构如图：
   
2. api.js代码如下：

// 单独配置url地址，便于以后维护
const BASE_URL = 'http://localhost:8082'
// 暴露一个方法，用uni.request发送请求，异步处理的封装最好用promise
export const myRequest = (options)=>{
	// resolve（成功之后的回调函数）和reject（失败之后的回调函数）
	return new Promise((resolve,reject)=>{
		// 使用uni.request发送请求
		uni.request({
			// 拼接请求地址
			url:BASE_URL+options.url,
			// 请求方式
			method: options.method || 'GET',
			// 数据
			data: options.data || {},
			// 请求成功
			success: (res) => {
				// 判断请求数据是否成功
				if(res.data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败!'
					})
				}
				resolve(res)
			},
			// 请求失败
			fail: (err) => {
				uni.showToast({
					title: '请求接口失败!'
				})
				reject(err)
			}
		})
	})
}

3. 在main.js中导入，并全局挂载

import { myRequest } from './util/api.js'

Vue.prototype.$myRequest = myRequest

4. 在需要发送网络请求的页面配置：

	onLoad() {
		// 在页面加载时调用
		this.getSwipers()
	},
	methods: {
		// 获取轮播数据
		async getSwipers () {
			const res = await this.$myRequest({
				url: '/api/getlunbo'
			})
			this.swipers = res.data.message
		}
	}