uni-app开发微信小程序封装异步请求
为什么要封装
- 原生的微信小程序请求不支持Promise
- uni-app的请求不能够方便的添加各种效果，例如加载时的loading
- 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
}
})
}
}
使用
- 新建api.js，结构如图：
- 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)
}
})
})
}
- 在main.js中导入，并全局挂载
import { myRequest } from './util/api.js'
Vue.prototype.$myRequest = myRequest
- 在需要发送网络请求的页面配置：
onLoad() {
// 在页面加载时调用
this.getSwipers()
},
methods: {
// 获取轮播数据
async getSwipers () {
const res = await this.$myRequest({
url: '/api/getlunbo'
})
this.swipers = res.data.message
}
}