zoukankan      html  css  js  c++  java
  • 一诺千金:微信小程序的wx.request 与Promise的结合使用

           因为js的异步回调机制,对于上一层数据的依赖,我们很可能会陷入回调地狱,因此我的代码常常是这样的:
     
    ajax(url, function (res){
        ajax(res.url, function(res) {
            ajax(res.url, function(res) {
                if (res.status == '1') {
                    ajax(res.url, function(res) {
                    ...
                    }
                }
                else if (res.status == '2') {
                    ajax(url2, function(res) {
                    ...
                }
                ...
            }
        }
    }
    );

           这种流程是很耗费心力并且脆弱的,体验很糟糕,因此,在这次小程序的开发中为了更好的体验,我开始使用了Promise.

    代码如下,这样一来,当我们第二个请求需要第一个参数判断时,可以不再陷入回调地狱,

    // 小程序与后端情求接口
        let baseUrlPromise = 'https://xxx.com';
        // 定义方法返回Promise参数,obj 为wx.request 方法中所需参数
        let req = function (obj) {
          return new Promise(function (resolve, reject) {
            wx.request({
              url: baseUrlPromise + obj.url,
              data: obj.data,
              header: obj.header,
              method: obj.method == undefined ? "get" : obj.method,
              success: function (data) {
                // 回调成功执行resolve
                resolve(data)
              },
              fail: function (data) {
                // 回调失败时
                if (typeof reject == 'function') {
                  reject(data);
                } else {
                  console.log(data);
                }
              },
            })
          })
        }
        // 执行req 方法,传入第一个请求,
        let req1 = req({
          url: '第一次请求链接,与baseUrlPromise 相结合',
          data: {},
        })
        // 当需要多次请求时加入
        req1.then(function (data) {
          console.log('promiseThen1')
          console.log(data);
          return req({
            url: '第二次请求链接',
          })
    
        }).then(function (data) {
    
          console.log('promiseThen3')
          console.log(data);
          return req({
            url:'第三次请求链接'
          })
       }).then(......).catch(function(data){
          console.log(PromiseCatch)
       })

     当需要多次回调时,每次返回一个new Promise(),以此,代码得以美观,阅读也更为便捷.

  • 相关阅读:
    软件测试工具
    nat 转发
    修改Oracle 10g Express Edition的字符集
    java数字证书学习笔记
    【Java–XML】JDOM解析XML字符串(非XML文档)
    JAVA Web快速开发部署(Javarebel实现真正高效的tomcat热部署)
    热天稀饭配方
    javascript 使用正则实现replaceall功能
    设置eclipse中各类型文件的默认浏览器(如设置flex的.mxml的编辑器为MXML Editor)
    GAE中JDO数据清除
  • 原文地址:https://www.cnblogs.com/h246802/p/8579770.html
Copyright © 2011-2022 走看看