关于Promise的理解

Yx0629

已于 2022-09-21 19:57:53 修改

阅读量295

点赞数 1

文章标签： javascript 前端开发语言

于 2022-09-21 19:55:37 首次发布

本文链接：https://blog.csdn.net/Yx0629/article/details/126952089

版权

Promise是用来解决异步编程的一种方案，从语法上来讲Promise是一个对象。Promise有三种状态，pending(等待状态)，fulfiled(成功状态),reject(失败状态)，状态一旦改变就不会再变。只要创建了Promise，就会执行。

Promise的原理：

Promise 的原理分析其实 promise 原理说起来并不难，它内部有三个状态，分别是 pending ， fulfilled 和 rejected 。 pending 是对象创建后的初始状态，当对象 fulfill （成功）时变为 fulfilled ，当对象 reject （失败）时变为 rejected 。

为什么要使用Promise:

Promise是用来解决两个问题的：

        回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象

        promise可以支持多个并发的请求，获取并发请求中的数据

        这个promise可以解决异步的问题，本身不能说Promise是异步的

什么是回调地狱函数：

就是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。

而这个时候，就是Promise的主场了。

Promise的基本API：

Promise.then():
var promise = new Promise(function(resolve, reject) {
    resolve("传递给then的值");
});
promise.then(function(value) {
    console.log(value);
}, function(error) {
    console.error(error);
});
这段代码创建一个promise对象，定义了处理onFulfilled和onRejected的函数（handler），然后返回这个promise对象。这个promise对象会在变为resolve或者reject的时候分别调用相应注册的回调函数。
（1）当handler返回一个正常值的时候，这个值会传递给promise对象的onFulfilled方法。
（2）定义的handler中产生异常的时候，这个值则会传递给promise对象的onRejected方法。

Promise.catch():

        等价于promise.then(undefined, onRejected) 的语法糖

Promise.resolve():

Promise.resolve(promise);

Promise.resolve(thenable);

Promise.resolve(object);

接收到promise对象参数的时候：返回的还是接收到的promise对象

接收到thenable类型的对象的时候：返回一个新的promise对象，这个对象具有一个 then 方法

接收的参数为其他类型的时候（包括JavaScript对或null等）：返回一个将该对象作为值的新promise对象。

Promise.reject()：

        Promise.reject(object)

        和 Promise.resolve不同的是，即使Promise.reject接收到的参数是一个promise对象，该函数也还是会返回一个全新的promise对象。

Promise.all():

         Promise.all(promiseArray)

        生成并返回一个新的promise对象。
        参数传递promise数组中所有的promise对象都变为resolve的时候，该方法才会返回，         新创建的promise则会使用这些promise的值。
        如果参数中的任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象。

Promise.race():

        Promise.all(promiseArray)

        生成并返回一个新的promise对象。
        参数 promise 数组中的任何一个promise对象如果变为resolve或者reject的话，该函数就会返回，并使用这个promise对象的值进行resolve或者reject。

什么是async / await？

async / await其实是Promise的语法糖，它能实现的效果都能用then链来实现，这也和我们之前提到的一样，它是为优化then链而开发出来的。从字面上来看，async是“异步”的简写，await译为等待，所以我们很好理解async声明function是异步的，await等待某个操作完成。

async / await的作用？

        说明一下async/await的作用。await操作符后面可以是任意值，当是Promise对象的时候，会暂停async function执行。也就是说，必须得等待await后面的Promise处理完成才能继续，await 表达式的运算结果取决于它等的东西。

        如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

        如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

        await 命令后面的 Promise 对象，运行结果可能是 rejected，所以最好把 await 命令放在 try...catch 代码块中。

then链是什么？

        注意一：then链是按照顺序执行的
        注意二：如果是多个then，那么上一个then必须返回Promise对象才能接受到上一个then的返回结果，否则接受的是undefined
        注意三：Promise本身是同步的，但是then是异步的promise是es6提供的一个对象，不受外界的影响。

Promise.then()链解决异步实例：

// 封装的Promise对象方法
  Marquee: function() {
    let param = {
      id:'1'
    }
    return new Promise((resolve,reject)=>{
      resolve(util.post(api.Marquee(), param))
    }).then(res=>{
      if(res.Result){
        this.setData({
          noticeDataList: res.Data
        })
        let noticeData = this.data.noticeDataList[0]
        noticeData['index'] = 0
        this.setData({
          noticeData: noticeData
        })
      }
    })
  },
  // 在需要解决异步的地方使用，这样一来，虽然获取数据的方法是异步的，也可以实现先获得数据再挨个执行then里面的方法了
  that.Marquee().then(()=>{
     that.timeOutUpdateNotice()
     that.getBrandInfoWall()
     that.getPosition()
     that.judgeMorning()
   })