关于es6中promise的填坑之旅--微信小程序异步转同步

一、简介

　　之前用promise对小程序的异步请求转同步请求。今日稍有闲暇便记录于案。

二、promise相关背景

　　1、是什么？promise的意思是承诺，有的人翻译为许愿，但它们代表的都是未实现的东西，等待我们接下来去实现。Promise最早出现在commnjs，随后形成了Promise/A规范。在Promise这个技术中它本身代表以目前还不能使用的对象，但可以在将来的某个时间点被调用。使用Promise我们可以用同步的方式写异步代码。其实Promise在实际的应用中往往起到代理的作用。例如，我们像我们发出请求调用服务器数据，由于网络延时原因，我们此时无法调用到数据，我们可以接着执行其它任务，等到将来某个时间节点服务器响应数据到达客户端，我们即可使用promise自带的一个回调函数来处理数据。

　　2、能干嘛？JavaScript实现异步执行，在Promise未出现前，我们通常是使用嵌套的回调函数来解决的。但是使用回调函数来解决异步问题，简单还好说，但是如果问题比较复杂，我们将会面临回调金字塔的问题（pyramid of Doom）。比如实际应用中，ajax请求后的数据要作为下个请求的参数。

　　3、相关API（then和reject）

    
　　then方法
　　//做饭
    function cook(){
        console.log('开始做饭。');
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('做饭完毕！');
                resolve('鸡蛋炒饭');
            }, 1000);
        });
        return p;
    }

    //吃饭
    function eat(data){
        console.log('开始吃饭：' + data);
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('吃饭完毕!');
                resolve('一块碗和一双筷子');
            }, 2000);
        });
        return p;
    }
 
    function wash(data){
        console.log('开始洗碗：' + data);
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('洗碗完毕!');
                resolve('干净的碗筷');
            }, 2000);
        });
        return p;
    }
    cook()
    .then(function(data){
        return eat(data);
    })
    .then(function(data){
        return wash(data);
    })
    .then(function(data){
        console.log(data);
    });
    //简写
    cook()
    .then(eat)
    .then(wash)
    .then(function(data){
        console.log(data);
    });

　　reject方法
　　//做饭
    function cook(){
        console.log('开始做饭。');
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('做饭失败！');
                reject('烧焦的米饭');
            });
        });
        return p;
    }
     
    //吃饭
    function eat(data){
        console.log('开始吃饭：' + data);
        var p = new Promise(function(resolve, reject){        //做一些异步操作
            setTimeout(function(){
                console.log('吃饭完毕!');
                resolve('一块碗和一双筷子');
            });
        });
        return p;
    }
    //推荐写法（阮一峰的es6入门标准） 
    cook()
    .then(function(data){
      console.log(data + '没法吃!');
    })
    .catch(err => {
        console.log(err)
    })
    console.log("会优先于then方法里面的打印，因为promise回调虽然是同步，但是then接受的函数为异步")
    //写法二
    cook().then(
    function(data){
        console.log(data + '没法吃!')
    },function(err){
        console.log(err)
    })
    console.log("会优先于then方法里面的打印，因为promise回调虽然是同步，但是then接受的函数为异步")

　　详见:http://www.hangge.com/blog/cache/detail_1638.html

四、8个例子进一步了解promise

　　详见：https://blog.csdn.net/weiwenwen6/article/details/80418404

五、catch方法

　　该方法刚接触有些懵推荐入门了解：https://blog.csdn.net/a695993410/article/details/80954552

　　以及更深入的了解：https://www.jianshu.com/p/c601969f5b2d 和 http://es6.ruanyifeng.com/#docs/promise

六、自己的填坑之旅（测试环境为微信小程序，最初是想用promise实现微信小程序请求的异步转同步）

    function request1(){
      return new Promise((resolve, reject) => {
        wx.request({
          url: 'https://www.apiopen.top/satinApi?type=1&page=1',
          success: function (res) {
            resolve(res)
            console.log("1请求到的："+res)
          },
          fail:function(err){
            reject(err)
            console.log(err)
          }
        })
      })
    }

    function request2(res){
      console.log("1传过来的："+ res)
      return new Promise((resolve,reject) =>{
        wx.request({
          url: 'https://www.apiopen.top/novelApi',
          success:function(res){
            resolve(res)
            console.log("2请求到的：" + res)
          },
          fail:function(res){
            reject(res)
            console.log(res)
          }
        })
      })
    }

    function request3(res) {
      console.log("2传过来的："+res)
      return new Promise((resolve, reject) => {
        wx.request({
          url: 'https://www.apiopen.top/meituApi?page=1',
          success: function (res) {
            resolve(res)
            console.log("3请求到的：" + res)
          },
          fail: function (res) {
            reject(res)
            console.log(res)
          }
        })
      })
    }

    request1()
      // .then(function(res){
      //   return request2(res)
      // })
      // .then(function(res){
      //   return request3(res)
      // })
      // .then(function(res){
      //   console.log("3请求道的："+res)
      //   return res+"3返回的"
      // })
      // .then(function(res){
      //   console.log(res)
      // })
      .then(res => {
        return request2(res)
      })
      .catch(err => {
        console.log(err)
      })
      .then(res => {
        return request3(res)
      })
      .then(res => console.log(res))