微信小程序异步请求封装方案
五星人 · 399浏览 · 发布于2021-03-02
1.使用callback
1.config.js 定义配置信息
请求的通用信息
2.在utils包中定义http.js
import { config } from '../config/config' class Http { static request({url, data, callback, method='GET'}){ wx.request({ url:`${config.apiBaseUrl}${url}`, data, header:{ appkey:config.appkey }, success:res=>{ callback(res.data) //使用回调函数将数据传出去 } }) } }
3.在model包中定义theme.js (业务对象)
import { Http } from '../utils/http'; class Theme{ //获取首页LocationA static getHomeLocationA(callback){ Http.request({ url:`/theme`, data:{ name:'t-1',//请求的参数 }, callback:data=>{ callback(data) //回调函数中嵌套回调函数 } }) } }
4.在home.js 调用
import { Theme } from '../../model/theme' onLoad: function (options) { Theme.getHomeLocationA(data=>{ this.setData({ topTheme:data[0] }) }) },
分析可知 使用callback函数会出现函数嵌套
2.使用Promise
1.使用Promise封装Http.js
import { config } from '../config/config' class Http{ static request({url, data, method='GRT'}){ return new Promise((resolve,reject)=>{ wx.request({ url: `${config.apiBaseUrl}${url}`, data, method, header: { appkey: config.appkey }, success:res=>{ resolve(res.data); }, fail:err=>{ reject(err) } }) }) } }
2.改写theme.js
import { Http } from '../utils/http'; class Theme { static getHomeLocationA(params) { return Http.request({ url: `/themes`, data: { names: params } }) } }
3.home.js
onLoad: function (options) { Theme.getHomeLocationA('t-1').then((data)=>{ this.setData({ topTheme:data[0] }) }) }
3.终级解决方案 async await
为了解决大量复杂不易读的Promise异步的问题,才出现的改良版
async必须声明的是一个function
async声明的函数的返回本质上是一个Promise。
await是在等待一个Promise的异步返回
1.将小程序内置非promise API转化为Promise请求
const promisic = function(func) { return function(params= {}) { return new Promise((resolve,reject)=> { const args = Object.assign(params,{ success:res=>{ resolve(res) }, fail:err=>{ reject(err) } }) func(args); }) } } export { promisic }
2.改写http.js
import { config } from '../config/config' import { promisic } from './util' class Http { static async request({url, data, method = 'GET'}){ return await promisic(wx.request)({ url: `${config.apiBaseUrl}${url}`, data, method, header: { appkey: config.appkey }, }) } } export { Http }
3.theme.js
import { Http } from '../utils/http'; class Theme { static async getHomeLocationA() { const res = await Http.request({ url: `/themes`, data: { names: 't-1' } }) return res.data } } export { Theme }
4.home.js
onLoad: async function (options) { const data = await Theme.getHomeLocationA(); this.setData({ topTheme:data[0] }) },
使用了 async await 异步函数 变成了同步函数调用
相关推荐
android下vulkan与opengles纹理互通
talkchan · 1173浏览 · 2020-11-23 10:37:39
Android 使用RecyclerView实现轮播图
奔跑的男人 · 2171浏览 · 2019-05-09 17:11:13
微软发布新命令行工具 Windows Terminal
吴振华 · 866浏览 · 2019-05-09 17:15:04
在华为写了十几年代码,我为什么还没有被拿去“祭天”
追忆似水年华 · 1198浏览 · 2019-05-09 17:22:20
android 通过修改图片像素实现CircleImageView
吴振华 · 1125浏览 · 2019-05-09 22:26:56
分类专栏
最新发布
最热排行
0评论