javaScript中Promise深度理解

anonymoussf 发布于2019-08-23 12:39 / 2709人阅读

摘要：共有三种状态，相应状态会触发相应的回调函数。在函数中调用在中调用在中的返回值为一个普通值值作为的值。如果中的回调函数抛出一个错误，那么返回的将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

用途

用于处理异步操作，避免地狱式回调，比如ajax请求，处理起来更加简单方便，代码看起来也更容易理解，便于维护。

概念

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。 Promise共有三种状态，相应状态会触发相应的回调函数。

pending: 初始状态。什么回调函数也不触发。

调用构造函数如new Promise((resolve, reject) => {}),在这个exextutor函数中要么调用resolve是状态改为完成，要么调用reject使状态改为失败，要么就什么都不调用，这个时候就是pending状态，此时[[PromiseValue]]为undefined。

    var result = new Promise((resolve, reject) => {
    
    })

在.then或.catch中返回值为上面直接使用构造函数的情况，并且在其内部也什么都不返回，那么这个时候也是pending。

    var result = new Promise((resolve, reject) => {
        resolve("xxx")
    }).then((res) => {
        return new Promise((resolve, reject) => {
    
        })
    })

在.then或.catch中无返回值的时候，这个时候返回的状态为前面的Promise的状态，如果前面的状态为pending,那么这里返回的也是pending,只不过没有返回值，返回的Promise中[[PromiseValue]]为undefined。

    var result = new Promise((resolve, reject) => {
        
    }).then((res) => {

    })

fulfilled: 成功状态。触发绑定的‘onfulfilled’方法。

在executor函数中调用resolve

  var result = new Promise((resolve, reject) => {
      resolve("xxx")
  })

在.then .catch中调用Promsie.resolve

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     return Promise.resolve("bbbb")
 })

在.then .catch中的返回值为一个普通值,值作为[[PromiseValue]]`的值。

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     return "xxxx"
 })

在.then或.catch中无返回值的时候，这个时候返回的状态为前面的Promise的状态，如果前面的状态为resolved,那么这里返回的也是resolved,只不过没有返回值，返回的Promise中[[PromiseValue]]为undefined。

    var result = new Promise((resolve, reject) => {
        resolve("xxx")
    }).then((res) => {
        
    })

rejected: 失败状态。触发绑定的‘onrejected’方法。

在executor函数中调用rejecte

  var result = new Promise((resolve, reject) => {
      reject("xxx")
  })

在.then .catch中调用Promsie.reject

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     return Promise.reject("bbbb")
 })

在.then .catch中抛出一个错误时，状态改为rejected，并且触发onrejected函数，错误信息将作为作为拒绝状态的回调函数的参数值和拒绝状态的Promise中[[PromiseValue]]的值。

 var result = new Promise((resolve, reject) => {
       resolve("xxx")
 }).then((res) => {
     throw "xxxx"
 }).catch((err) => {
      console.log(err) // xxxx
 })
 console.log(result) // {[[PromiseStatus]]: "rejected",  [[PromiseValue]]: "xxxx"}

.then

p.then(onFulfilled, onRejected);

当状态变成成功状态的时候调用onFulfilled, 当状态变成失败的时候，调用onRejected。它返回一个Promise，而它的行为与then中的回调函数的返回值有关：

如果then中的回调函数返回一个值，那么then返回的Promise将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

如果then中的回调函数抛出一个错误，那么then返回的Promise将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将那个Promise的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。

如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。

如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

Promise.resolve

参数可以是三种参数类型

Promise.resolve(value);

Promise.resolve(promise);

Promise.resolve(thenable);

如果参数类型是普通的值那么返回的Promise状态仍然是resolve,值为返回的值，如果返回值是另外两种情况，那么返回的Promise的状态由返回值来决定。例如下面的例子返回的是reject,值为xxxx

        var result = Promise.resolve(new Promise((resolve, reject) => {
                reject("xxxx")
        }))

Promise.reject

接收一个参数，但是参数不会影响返回的Promise结果，通过Promise.reject返回的状态始终都是reject。

Promise.all

当我们需要并行执行多个异步的时候，就可以使用这个方法，该方法接收一个可以迭代的对象，例如数组，数组中一般都是我们需要并行运行的Promise对象，如果是普通值那么也会直接返回。只有每一项都为resolve时，才会调用.then中的成功方法，并且回调参数值一个包含前面所有结果的数组，并且顺序也和前面一样，否则调用失败的回调。看个例子

var a = 1
var b = new Promise((resolve, reject) => {
    setTimeout(function(){
        resolve("xxxx")
    }, 1000)
})
var c = Promise.resolve("aaa")
var result = Promise.all([a, b, c]).then((values) => {
    console.log(values) // 1, xxx, aaa
}).catch((err) => {
    console.log(err)
})

对于Promise.all的同步或者异步，如果值是空的可迭代对象，那么将是同步的，其他情况均为异步。

GPU云服务器云服务器深度学习理解如何理解深度学习用深度学习理解深度学习的理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98903.html

ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
深度理解Promise--Promise的特点和方法详解

摘要：实例生成以后，用方法分别指定状态和状态的回调函数。则是或的别名，用于指定发生错误时的回调函数。上述代码也可以理解成这样处理和前一个回调函数运行时发生的错误发生错误方法用于指定不管对象最后状态如何，都会执行的回调函数。什么是promise？ Promise（承诺），在程序中的意思就是承诺我过一段时间（通常是一个异步操作）后会给你一个结果，是异步编程的一种解决方案。从语法上说，原生Pro...

wqj97 2019-08-26 10:48 评论0 收藏0
JavaScript 异步

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归问题描述在开发过程中，遇到一个需求：在系统初始化时通过http获取一个第三方服务器端的列表，第三方服务器提供了一个接口，可通过...

tuniutech 2019-08-21 18:34 评论0 收藏0