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(),以此,代码得以美观,阅读也更为便捷.

  • 相关阅读:
    C#创建https请求并使用pfx证书 拓荒者
    "类型初始值设定项引发异常" 解决方法 拓荒者
    Web乱码解决方法 拓荒者
    Asp.net Ajax Accordion控件的用法 拓荒者
    【转】最强日期正则表达式 拓荒者
    【转】Http之Get/Post请求区别 拓荒者
    【转】Log4Net五步走 拓荒者
    SqlServer 错误:"SQL Server 无法生成 FRunCM 线程" 解决办法 拓荒者
    log4net用法实例 拓荒者
    Asp.net Ajax Calendar控件用法 拓荒者
  • 原文地址:https://www.cnblogs.com/h246802/p/8579770.html
Copyright © 2011-2022 走看看