JS Promise.then的用法

JS：promise.then的用法

基础：在这儿我们就可以了解一下promise–then的用法和promise–catch的用法了（js的异步）

1）promise–then的用法
首先先了解一下promise实例构建的语法具体见网址:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

语法结构如下：(其构造函数的参数是一个函数，其参数函数的两个参数是固定的，注意这两个参数也是一个函数（固定的函数）)
new Promise( function(resolve, reject) {…} //executor);

也即构造promise异步对象可以如下所示：（刚开始创建成功时promise对象处于初始态pending）
const promise1=new Promise(function(resolve,reject){ “函数内容” })

  1.1）在这儿要注意resolve和reject两个参数的作用
        resolve和reject是两个函数，其每一个的作用分别是：
                                  resolve()函数执行后会使得promised对象的状态由初始态变化为成功态，也即操作成功执行
                                  reject()函数执行后会使得promise对象的状态变化为失败态,也即操作执行失败
        也即在promise的参数函数中执行resolve()会使得状态成功，反之变为失败。
        既然知道了这两个参数函数的作用，那么又该怎么利用它呢？这儿我们就需要知道与Promise对象连用的then或者catch了
  1.2)那么在讲解之前我们首先来看看then是什么东东...
       then()通俗易懂的来说其实就是然后的意思，也就是说在其之前的函数执行完成(完成有‘成功’和‘失败’两个意思奥，这儿是不是已经想到了一点什么)之后，接着执行的东西，它的语法其实就是： promise.then(),promise是一个Promise对象，其中then()方法也有两个参数，第一个参数为onFulfilled，第二个参数为onRejected，也即promise.then(onFulfilled,onRejected), 这两个参数也都是函数，第一个参数顾名思义可知其为：当实例状态变为成功时执行，第二个参数即为：当实例状态变为失败时执行；
      （是不是已经与promise中的两个参数联系起来了。。。）
      *同时这两个参数会各自携带一个参数，其中第一个参数(成功态)携带的参数是由promise中resolve()方法决定的，也即如果是resolve(10),那么第一个参数就会得到一个参数值为10的参数；同理，第二个参数(失败)携带的参数是由promise中的reject() 方法决定的；

       总而言之;其实then()方法中的两个参数其实就是与promise中的两个状态相对应，也即：如果当promise实例的状态由"初始"变为
       "成功"（也即调用resolve()）时，那么就会相应的去执行then（）方法中的第一个参数函数去了，同理第二个一样。
       这样，我们就知道如何合理的利用异步去处理代码了吧!!!

2）promise--catch的用法
      一句话来说，其实promise.catch()这个就是promise.then(null,onRejected)的意思，所以就不多说了

3）对于此个又该怎么使用...
   在我们的日常逻辑编程中，我们经常会遇到这样一种问题。---类似等待的问题，即一段程序必须要等到另一段程序执行完之后才去执行，这种程序的出现往往我们会通过多层此的嵌套来实现(微信小程序中经常会遇到此问题)，如果当前的嵌套层数只有2，3层还可以，但是如果当层数很多呢？这样的话就会形成所谓的"回调地狱",也即前一个的输出是后一个的输入，所以为了解决这个就出现了promise.then(),利用这个就可以将“回调地狱”的情况很明了的表示出来，因为.then存在着链式的调用，这样就会使得代码更加容易  维 护。废话不多说了，来看例子（特别简单的例子😂）

   const pro=new Promise(function(resolve,reject)=>{
        test_fun(resolve)
   });
   pro.then(function()=>{
     //这个函数必须要resolve()调用之后才能执行，在这儿我们假设test_fun()函数是异步执行的
     //同时在此我们将resolve当作参数传过去，在test_fun()函数中通过一定的判断条件进行判断，
     // 使得在test_fun()在执行异步完成之后，去调用resolve函数(已经当作参数传过去了)，这便会使得then开始执行了
   },null)

   来个具体一点的例子吧：比如说我现在要做一个微信小程序的"拼图程序",并要将拼完之后的图片保存(那么就需要利用画布作为中介了)

   第一步：利用一个循环将所有的图片循环的绘制到画布上面，
   第二部：利用画布的函数接口将画布上面的内容输出为图片并保存
   第三步：在这儿我们就有一个疑问了？输出画布内容为图片肯定是先要将所有的图片绘制完成之后才能输出为图片是吧，但是我么又说了
          绘制图片到画布是异步执行的，所以如果我们不用以上方法处理的话，输出画布内容时是得不到拼图内容的，所以我们就可以利用以上方法来实现了，具体实现如下：
  
  const pro=new Promise(function(resolve,reject)=>{
        test_fun(resolve)
   });
   pro.then(function()=>{
      //函数功能：在绘制完成的基础上将图片从画布上面导出并保存
   },null)；
   ...
   test_fun(resolve)       //函数功能：将所有图片绘制到画布上面（利用for循环或者递归实现），注意是异步的
   {
      //在这儿假设由5张图片要绘制,
      for(var i=0;i<5;i++)
      {
        .....      //功能：循环绘制图片到画布，异步的（微信小程序）
      }

      //以下是重点了（"唤醒"then来执行代码了）
      if(i===5){
        resolve;      //到这儿时代表已经绘完了，所以可以利用调用then了
      }
   }