全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[三明seo公司搜久澳]微信小程序Promise简化回调实例分享

  Promise 是异步编程的一种解决方案-◇=◁,比传统的解决方案——回调函数和事件——更合理和更强大◁==▼。它由社区最早提出和实现…◁▽•,ES6 将其写进了语言标准,统一了用法,淮北市小程序制作公司原生提供Promise对象。本文主要和大家介绍微信小程序使用Promise简化回调,小编觉得挺不错的,[重庆关键词seo公司]微信小程序中表单Form的解析现在分享给大家,也给大家做个参考••☆□。一起跟随小编过来看看吧,希望能帮助到大家。塔城市小程序制作公司

  所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说●◆-☆,[三明seo公司搜久澳]Promise 是一个对象●=•■,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

  了解什么是 Promise 对象

  在项目中▼△○□,会出现各种异步操作,如果一个异步操作的回调里还有异步操作,就会出现回调金字塔。

  比如下面这种

  

// 模拟获取code,然后将code传给后台,成功后获取userinfo,再将userinfo传给后台
// 登录
wx.login({
 success: res => {
 let code = res.code
 // 请求
 imitationPost({
 url: '★◇★;/test/loginWithCode'△■;•…□●,
 data: {
 code
 }…★,
 success■△=★: data =>▷•■; {
 // 获取userInfo
 wx.getUserInfo({
 success: res =>○▽□▼; {
 let userInfo = res.userInfo
 // 请求
 imitationPost({
 url-▪…◆: '/test/saveUserInfo'△-◇;,
 data: {
 userInfo
 }▲◁★,
 success: data => {
 console.log(data)
 }△◁,
 fail: res => {
 console-△▷■.log(res)
 }
 })
 },
 fail: res => {
 console.log(res)
 }
 })
 },
 fail: res =>◆•; {
 console☆○◆.log(res)
 }
 })
 },
 fail◇◁★▷: res => {
 console.log(res)
 }
})

 

  下面分析如何用Promise来进行简化代码

  因为微信小程序异步api都是success和fail的形式,所有有人封装了这样一个方法◁△□•:

  promisify●□.js

  

module◆▲-.exports = (api) => {
 return (options, .-▼▪◆..params) => {
 return new Promise((resolve, reject) => {
 api(Object.assign({}★○▷=, options, { success☆▲: resolve, fail☆•□: reject })◁▷◇○, .△•.▪▪.params)▷-…▲;
 })•=;
 }
}

 

  先看最简单的:

  

// 获取系统信息
wx◇●.getSystemInfo({
 success◆▽=: res => {
 // success
 console.log(res)
 }▪★,
 fail: res => {
 }
})

 

  使用上面的promisify▽◇.js简化后:

  

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)
getSystemInfo().then(res=>{
 // success
 console●★.log(res)
}).catch(res=>-★■;{
})

 

  

getSystemInfo
 

  可以看到简化后的回调里少了一个缩进,并且回调函数从9行减少到了6行。

  回调金字塔的简化效果

  那么再来看看最开始的那个回调金字塔

  

const promisify = require('./promisify')
const login = promisify(wx=….login)
const getSystemInfo = promisify(wx.getSystemInfo)
// 登录
login().then(res => {
 let code = res.code
 // 请求
 pImitationPost({
 url: '▽◁▼△;/test/loginWithCode',
 data□●……: {
 code
 }▲▼▪▲,
 }).then(data => {
 // 获取userInfo
 getUserInfo().then(res => {
 let userInfo = res.userInfo
 // 请求
 pImitationPost({
 url▼■★◇: '/test/saveUserInfo'△△○;,
 data•☆◆△: {
 userInfo
 }□◆▽,
 }).then(data => {
 console●•…★.log(data)
 }).catch(res => {
 console.log(res)
 })
 })△•…▽.catch(res =>◆★; {
 console.log(res)
 })
 }).catch(res => {
 console.log(res)
 })
})▼△◆•.catch(res => {
 console▼…○.log(res)
})

 

  

简化回调
 

  可以看到简化效果非常明显▼•◆。临沧市小程序制作公司

  同样适用于网页或者nodejs等中。

  相关推荐○•□△:

  微信小程序getUserInfo回调详解

  jQuery回调方法使用详解

  PHP回调函数的解析

  以上就是微信小程序Promise简化回调实例分享的详细内容•■▪,更多请关注久澳传媒编程栏目其它相关文章•■!

[三明seo公司搜久澳]微信小程序Promise简化回调实例分享

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。