安庆网络推广公司
当前位置:首页 > 文章

微信小程序制作异步处置教程

发布日期:2022-11-11浏览量:77
择要:微信小程序是经由过程wx.request进行异步处置,运用起来的确有不少不便当,不克不及忍,幸好小程序是支持ES6语法的,以是可以运用promise略加改造。
微信小程序是经由过程wx.request进行异步处置,运用起来的确有不少不便当,不克不及忍,幸好小程序是支持ES6语法的,以是可以运用promise略加改造。 Page({ data: {  myData: }, // loadMyData函数用于打印myData的值  loadMyData () {  console.log(获取到的数据为: + this.data.myData) },  // 生命周期函数onload用于监听页面加载 onload: function () {  wx.request({ url: https://api,  // 某个api接口地址  success: res => {  console.log(res.data)  this.setData({  myData: res.data  })  console.log(this.data.myData)  } })  // 挪用之前的函数  this.loadMyData()  }  }) 而后咱们会在控制台到如许的后果:
这实在是一个很简略的异步问题,wx.request是异步要求,JS不会等候wx.request执行结束再往下执行,以是JS按递次会先执行this.loadMyData(),等服务器返回数据以后,loadMyData()早就执行完了,当然也就没有拿到值啦。 实在咱们在同步流程中才说“返回”,异步没有“返回”这个观点(或者说异步返回是没有意思的),异步对应的是“回调”,也就是说,对付一个异步函数,咱们应该传入一个“回调函数”来接管后果。
开端解决:经由过程回调接管后果 最简略的解决计划,就是把需求运用异步数据的函数写在回调里: onload: function () {  wx.request({  url: https://api, // 某个api接口地址  success: res => {  console.log(res.data)  this.setData({  myData: res.data  })  console.log(this.data.myData)  // 把运用数据的函数写在回调函数success中  this.loadMyData()  }  })  } 而咱们发现,微信小程序的网络要求wx.request,也恰是这类寄托回调函数的模式,雷同于之前的$.ajax,它在逻辑庞大、页面执行递次要求多的情况下,弊病也是很明明的。
不外幸亏小程序支持ES6,咱们可以纵情地拥抱Promise! 运用Promise包装wx.request Promise这东西简略说来就是,它可以将异步的执行逻辑和后果处置分散,摒弃了一层又一层的回调嵌套,使得处置逻辑愈加明晰。
/**  * requestPromise用于将wx.request改写成Promise体式格局  * @param:{string} myUrl 接口地址  * @return: Promise实例对象  */  const requestPromise = myUrl => { // 返回一个Promise实例对象  return new Promise((resolve, reject) => {  wx.request({ url: myUrl,  success: res => resolve(res)  }) }) } // 我把这个函数放在了utils.js中,如许在需求时可以直接引入  module.exports = requestPromise 此刻再运用尝尝: // 援用模块const utilApi = require(../../utils/util.js) Page({ ...  // 生命周期函数onload用于监听页面加载  onLoad: function () { utilApi.requestPromise(https://www.bilibili.com/index/ding.json)  // 运用.then处置后果  .then(res => {  console.log(res.data) this.setData({ myData: res.data })  console.log(this.data.myData)  this.loadMyData()  })  }  })   后果和运用回调函数一致。
当有多个异步要求时,直接不竭地.then(fn)行止置便可,逻辑明晰。 当然,这里只是写了一个最简略的Promise函数,还不完整。更完整的Promise化wx.request,等以后营业需求再完善吧。另外各类小程序制作框架也都有了现成的promise化API,拿来即用。

相关文章:

服务地区
怀宁网络推广 网站营销
潜山网络推广 网站营销
桐城网络推广 网站营销
太湖网络推广 网站营销
宿松网络推广 网站营销
岳西网络推广 网站营销
望江网络推广 网站营销
热门文章
1不懂代码怎么开发小程序 手把手教你制作小程序
2浅析安庆小程序运营过程当中三种常见的红包发放类型
3浅谈安庆企业在没有公家号的条件下推广小程序的五大技巧
4浅析安庆电商小程序运营中配置优惠券运用门坎的三大技巧
5为甚么安庆小程序制作越早起头越好?
6微信小程序制作图片上传功用
7浅析安庆企业将小程序制作外包的四大首要劣势
8浅析安庆小程序推广过程当中引导用户积极进行同享的三大技巧
9简析安庆企业进行小程序制作的四大首要劣势
10安庆小程序制作完成后通不外审核的起因有哪些?