ES6: Promise对象的基础

最新推荐文章于 2020-11-03 15:35:44 发布
最新推荐文章于 2020-11-03 15:35:44 发布
阅读量243 收藏
点赞数
分类专栏： ES6 文章标签： ES6 Promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devJan/article/details/89434954
版权

Promise返回的只有二种状态要么已解决rejected，要么已拒绝rejected

内置属性

[[PromiseStatus]]

  1. Promise 的当前状态
  2. 有三种状态[“pending”, “resolved”, “rejected”]
  3. 初始状态是"pending"
  4. 状态由调用的resolve,reject 回调函数, throw语句抛出，程序异常来决定状态的变化, 只会变化成[‘resolved’, ‘rejected’]
  5. 最后的状态如果没有异常或者异常被处理就必定是“resolved”
  6. 如果异常没有被处理捕获，状态就是"rejectd" 并抛出异常
  7. Promise无法捕获异步的异常

[[PromiseValue]]:

  1. promise的当前的状态值
  2. 初始值undefined
  3. 状态值由resolve, reject回调函数, throw语句, 程序异常决定
  4. 只要状态值被then或者catch处理过后就重新为undefined
  5. then,catch的回调函数有返回值或有异常的话就是新的状态值
构造函数方法
  1. Promise.all()
  2. Promise​.race()
  3. Promise​.resolve()
  4. Promise​.reject()
构造函数原型方法
  1. Promise.prototype.then
  2. Promise.prototype.catch
  3. Promise.prototype.finally
一、初始状态（pending）
const promise1 = new Promise((resolve, reject) => {})
// [[PromiseStatus]]: "pending"
// [[PromiseValue]]: "undefined"
console.log(promise1) 

const promise2 = new Promise((resolve, reject) => 'resolvedValue')
// [[PromiseStatus]]: "pending"
// [[PromiseValue]]: "undefined"
// Promise构造函数不接收执行函数的返回值，总是返回一个新的Promise对象
console.log(promise2)
二、两种状态（resolved, rejected）
// 1. resolved状态
const promise1 = new Promise((resolve, reject) => {
	resolve('success1')
	resolve('success2') // 多次执行状态值改变无效
	reject('success2') // 执行状态改变无效
})
// [[PromiseStatus]]: "resolved"
// [[PromiseValue]]: "success1"
console.log(promise1)

// 2.1. rejected状态
const promise2 = new Promise((resolve, reject) => {
	reject('failed1')
	reject('failed2') // 多次执行状态值改变无效
	resolve('success2') // 执行状态改变无效
})
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: "failed"
// 同时控制台报出错误, 并没有处理异常
console.log(promise2)

// 2.2. rejected状态
const promise3 = new Promise((resolve, reject) => {
	throw 'error' // 主动抛出异常
})
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: "error"
// 同时控制台报出错误, 并没有处理异常
console.log(promise3)

// 2.3. rejected状态
const promise4 = new Promise((resolve, reject) => {
	rejected // 程序异常, rejected变量并未声明
})
// [[PromiseStatus]]: "rejected"
// [[PromiseValue]]: "ReferenceError: rejected is not defined"
// 同时控制台报出错误, 并没有处理异常
console.log(promise4)
三、实例方法（then, catch, finally）
then(onFulfilled, onRejected)

返回promise对象, 可链式调用， 处理resolved或rejected的状态回调
then回调方法可返回值或返回新的promise对象
如果是返回的新的promise对象，就丢弃当前状态与promise对象

如果rejected被处理过后, then方法不论链式调用多少次都会执行除非当前状态是rejected，

// 状态"resolveed"
const promise = new Promise((resolve, reject) => resolve('success'))
// then promise (resolved, rejected)的状态值接收方法
promise
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "success"
  .then(value => {
	// 打印"success"
	console.log(value)
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: undefined
  .then(value => {
    // 打印undefined
    console.log(value)
    return 'success2' // 返回值给下一个then接收使用
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "success2"
  .then(value => {
    // 打印success2
    console.log(value)
  })
then(onFulfilled, onRejected)

rejected状态如果被处理过, promise的状态会重新为resolved值为返回值

// 状态"rejected"
const promise = new Promise((resolve, reject) => reject('failed'))
// then promise (resolved, rejected)的状态值接收方法
// 返回promise对象, 可链式调用
promise
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .then(value => {
  	// fulfillment
    }, error => {
  	// 打印"failed"
    console.log(error)
    return 'new value'
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "new value"
  .then(value => {
  	// 打印 ""new value"
	console.log(value)
  })
catch(onRejected)

返回promise对象, 可链式调用， 处理失败的状态回调
也可返回值或promise对象, 并初始化promise状态为resolved
如果是返回的新的promise对象，就丢弃当前状态与promise对象

// 状态"rejected"
const promise = new Promise((resolve, reject) => reject('failed'))
// then promise (resolved, rejected)的状态值接收方法
// 返回promise对象, 可链式调用
promise
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .then(value => {
    // resolved时的回调, 因为当前promise的状态是rejetced状态所以此回调并不会执行
    console.log(value)
  })
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .catch(error => {
  	// 打印"failed"
    console.log(value)
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: undefined
  then(value => {
    // 打印undefined
  	console.log(value)
  })
finally(onFinally)

返回promise对象, 可链式调用
onFinally回调函数无论当前状态是resolved或者是rejected都会执行
与try语句的finally一样

const promise = new Promise((resolve, reject) => reject('failed'))
// 返回promise对象, 可链式调用
promise
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "failed"
  .catch(error => {
  	// 打印"failed"
  	// 返回新的状态是
  	// [[PromiseStatus]]: "resolved"
  	// [[PromiseValue]]: "resolved value"
    return 'resolved value'
  })
  // [[PromiseStatus]]: "resolved"
  // [[PromiseValue]]: "resolved value"
  // onFinally没有参数
  .finally(() => {
    // 执行一些清尾操作
  	// 改变promise的状态与状态值
  	return Promise.reject('error')
  })
  // [[PromiseStatus]]: "rejected"
  // [[PromiseValue]]: "error"
四、构造函数方法（all, race, resolve, reject）
Promise.all(iterable)
  1. Promise.all(iterable) 方法返回一个 Promise 实例
  2. 此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）
  3. 如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果
  4. [[PromiseValue]]值是当前的状态对应已解决的array对象值或已拒绝的错误值

参数iterable
— iterable不是可迭代对象

  1. 直接返回undefined再异步的返回rejected状态的promise
  2. 如果没有用then或者catch回调处理的话就抛出控制台错误

— iterable是可迭代对象

  1. 如果可迭代对象是空的就返回完成resolved状态的promise
  2. 如果可迭代对象不是Promise对象就返回一个异步的完成resolved状态的promise
  3. 其它情况下返回pending这个返回会在之后所有的promise都完成或者有一个失败的时候异步最后变成已拒绝(rejected)或者已解决(resolved)
iterable不是可迭代对象
// 控制台报错直接返回undefined
// 异步的返回rejected状态的promise
var promise = Promise.all(true)  // 不是可迭代对象
// 如果加上catch处理就不会报错
promise.catch(err => {})
iterable是可迭代对象
// 1. 空的可迭代对象
var promise = Promise.all('')  // 字符串也是可迭代的对象
// 直接返回已完成resolved状态的promise(同步)
console.log(promise)

#logs
Promise {<resolved>: Array(0)}

// a. 可迭代对象不是Promise对象就返回一个异步的完成resolved状态的promise
// b. 先返回pending再返回已完成的resolved状态的promise
var promise = Promise.all('abc')
// 先返回pending
console.log(promise)
setTimeout(() => {
  // 再返回resolved状态的promise
  console.log(promise)
})

#logs
Promise {<pending>}
Promise {<resolved>: ['a', 'b', 'c']}

// 先返回pending再返回已完成的resolved状态的promise
var promise = Promise.all([1, 2, Promise.resolve('success')])
console.log(promise)
setTimeout(()=> {
  console.log(promise)
})

#logs
Promise {<pending>}
Promise {<resolved>: [1, 2, "success"]}

// 先返回pending再返回已拒绝的rejected状态的promise
var promise = Promise.all([1, 
  Promise.resolve('success1'), 
  Promise.resolve('success2'), 
  Promise.reject('error')])
console.log(promise)
setTimeout(() => {
  console.log(promise)
})

#logs
Promise {<pending>}
Uncaught (in promise) error
Promise {<rejected>: "error"}

// 先返回pending再返回已拒绝的rejected状态的promise
var promise = Promise.all([ 
  Promise.resolve('success1'), 
  Promise.resolve('success2'), 
  Promise.reject('error')])
  
console.log(promise)
promise
  .then(value => console.log(value))
  .catch(e => console.log(e))

#logs
Promise {<pending>}
error
Promise.race(iterable)
  1. Promise.racel(iterable) 方法返回一个 Promise 实例
  2. 一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。
  3. 与all方法不同在处在于如果iterable是空的迭代对象就永远返回pending状态的promise
  4. 只要有一个已完成（resolved）或已拒绝（rejected）就直接返回完成或拒绝状态的promise
iterable空的可迭代对象
// 1. 空的可迭代对象
var promise = Promise.race('')  // 字符串也是可迭代的对象
// 永远返回已完成pending状态的promise(同步)
console.log(promise)

#logs
Promise {<pending>}
iterable不全是promise对象
var promise = Promise.race([1, 2, Promise.reject('error')])  // 字符串也是可迭代的对象
// 永远返回已完成pending状态的promise(同步)
console.log(promise)

#logs
Promise {<pending>}
Promise {<resolved>: 1}
race比速度
var p1 = new Promise((resolve, reject) => {
	setTimeout(resolve, 2000, 'resolved p1')
})
var p2 = new Promise((resolve, reject) => {
	setTimeout(resolve, 1000, 'resolved p2')
})
var p3 = new Promise((resolve, reject) => {
	setTimeout(reject, 800, 'rejected p3')
})
var promise = Promise.race([p1, p2, p3])  
console.log(promise)
console.log('macro')
promise
  .then(val => console.log(val))
  .catch(err => console.log(err))

#logs
Promise {<pending>}
macro
rejected p3
Promise.resolve(value)
  1. 返回一个以给定值解析后的resolved状态的Promise 对象
  2. 如果value是一个thenable对象（即带有then方法）返回值会根据这个then方法内部的状态而异步的采用它的最终状态
  3. 如果value是一个promise对象就直接返回value这个promise对象
平常的value值

—非thenable对象与promise对象

// 平常的value值
const promise = Promise.resolve([1, 2, 3])
// resolved状态的promise
console.log(promise)
promise.then(val => {
  // 打印[1, 2, 3]
  console.log(val)
})

#log
Promise {<resolved>: [1, 2, 3]}
[1, 2, 3]
value是thenable对象
// promise对象的value值, 异步的resolved状态
const thenable = {
  then(resolve, reject) {
    // resolved 状态
    resolve('resolve value')
    throw 'error' // 丢弃这个状态, 多次执行状态值改变无效
  }
}
const promise = Promise.resolve(thenable)
// pending
console.log(promise)
promise.then(val => {
  // resolved 状态
  console.log(promise)
  // 打印[1, 2, 3]
  console.log(val)
})

#log
Promise {<pending>}
Promise {<resolved>: "resolve value"}
resolve value
value是promise对象
// promise对象的value值
const promise = Promise.resolve(promise.reject('error'))
// rejected 状态
console.log(promise)
promise.catch(err => {
	console.log(err)
})

#log
Promise {<rejected>: "error"}
error
Promise.reject(reason)
  1. 返回一个带有拒绝原因reason参数的Promise对象
  2. 没有thenable, 与resolve方法不同
  3. 会原封不动的把reason拒绝的理由传递给catch处理
const promise = Promise.reject(new Error('error message'))
// rejected状态的promise
console.log(promise)
promise
  .then(val => {
    // 不会执行
    console.log(val)
  })
  .catch(err => {
  	// 打印错误信息
    console.log(err)
  }) 

#log
Promise {<rejected>: Error: error message}
Error: error message
里面的世界真美丽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 将数字用千分位表示
weixin_42556438的博客
08-17 2591
数字使用千分位表示第一种：toLocaleString()第二种：使用正则表达式替换 在涉及到金额的情况下，一般来说，都需要用千分位的方式进行展示。更利于用户阅读。 接下来介绍两种常用的方案。 第一种：toLocaleString() toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。具体用法可查看MDN介绍 第二种：使用正则表达式替换 function format(number) { const num = String(number) const reg = /
关于 Module build failed: ReferenceError: Promise is not defined 错误
chenjiaang的博客
02-17 1万+
webpack打包的时候报错：Module build failed: ReferenceError: Promise is not definedERROR in ./~/css-loader!./style.css Module build failed: ReferenceError: Promise is not defined at LazyResult.async (D
Promise 失败和捕捉以及异步报错
weixin_40863414的博客
05-05 887
异步报错的概念&promise中fail和catch方法的区别 文章地址： Promise 失败和捕捉以及异步报错
关于promise 的 PromiseStatus : “resolved”、PromiseValue return 值是 undefined
Baron的技术blog
11-03 2517
//上源代码 const promise1 = new Promise((resolve, reject) => { console.log('promsie1') resolve('resolve1') }) const promise2 = promise1.then(res => { console.log(res) // return res
Promise深入理解
山水子农
07-28 4726
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
study-es6promise:学习es6-promise
06-02
本项目"study-es6promise"就是专门针对这一特性的学习资源，旨在帮助开发者理解和掌握如何使用ES6的Promise来按顺序执行异步操作。 首先，让我们深入了解Promise。Promise是JavaScript中表示异步操作的对象，它代表...
ES6基础之 Promise 对象用法实例详解
10-16
ES6中的Promise对象是一种处理异步编程的机制，它允许开发者以同步的方式编写异步代码，通过一个可以提供更好控制的异步操作的API。Promise对象有三种状态：pending（进行中）、fulfilled（已完成，有时也称为...
freeCodeCamp-ES6:使用ES6完成freeCodeCamp算法
05-09
通过以上学习和实践，学员不仅能掌握ES6的语法特性，还能提高问题解决能力和编程思维，为成为专业的前端开发者打下坚实基础。在freeCodeCamp的挑战中，不断实践、不断探索，将使你对JavaScript和ES6的理解更上一层楼...
javascript-completo-es6:Curso完成JavaScript ES6 da Origamid
03-26
8. **Promise 对象**：Promise是处理异步操作的新方法，提供了链式调用，使得异步代码更易读、易理解和维护。 9. **模块导入导出**：使用`import`和`export`关键字，可以实现JavaScript模块化，方便代码组织和复用...
Promise {<pending>} __proto__: Promise [[PromiseStatus]]: "resolved" [[PromiseValue]]: true
lifangfang0607的博客
01-21 3590
vue 中使用axios异步调用时，打印出如上图的值，表示Promise并未完成，当前状态的值无法获取到。
对Promise状态的理解和基本用法
weixin_34107955的博客
01-12 772
Promise状态的理解 用new Promise实例化的Promise对象有三个状态： “has-resolution” - Fulfilled reslove(成功时)，调用onFulfilled "has-rejection" - Rejected reject(失败时)。调用Rejected "unresolve" - Pending 既不是resolve也不是reject状态，也就是Pr...
关于 js Promise 中如何取到 [[PromiseValue]] 值
weixin_44732337的博客
11-28 9851
我在进行 Vue 项目通过跨域获得数据，并且将数据传递给别的组件的时候，遇到的问题。 我的大致模型是这样的（基于 webpack ）： 先有一个文件 A.vue， <script> 标签的代码： export default { data() { return { album: [], albumid: 30318116 }; }, ...
js promise中如何取到[[PromiseValue]]
weixin_30321449的博客
05-18 7800
返回的值Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "http://dl.stream.qqmusic.qq.com/M8000046HRBd0FvKLm…C380C8F140044403EDC0124&guid=489780640&fromtag=30" } 取其中的P...
Promise的实现及解析
weixin_34277853的博客
03-23 297
Promise雏形（加入状态机） function Promise(executor){ let self = this; self.status = 'pending'; self.value = undefined; self.reason = undefined; function resolve(value){ if( self....
promise深入了解
风火一回，一生不毁
05-27 1062
Pormise深入了解import React from "react";export default class Footer extends React.Component{ constructor(props){ super(props) this.state = { flag : 0, result:''
promise中如何取到PromiseValue的值，其实很简单
热门推荐
轻风细雨_林木木
03-23 2万+
今天遇到一个奇葩问题，就是怎么样取return以后的[[PromiseValue]]里的值 如上图函数uploadSuccess想要获取saveTemplate的return里的值，然而们会发现这样出来的值是在“[[PromiseValue]]”里面的 这里怎么做呢？ 其实很简单，只要使用.then( ) 获取就可以了，这里要注意的是，使用.then()是异步的，所以可能你需要使用async 和...
异步promise返回内容为undefined解决方案
weixin_43294560的博客
07-10 1万+
采用此种方法,前台调用函数同步获取的异步内容为undefined import {getData} from '../http' export function getHomePagePart1(city) { const res=getData('/api/homehot?city='+city); res.then(result=>result.json()).then(data=>{ return data }).catch((err
JavaScript中对Promise对象的理解
果果的博客
09-20 513
注意单词对应的翻译，有助于理解整个模式 promise: 承诺 pending: 待定 settled: 定了 resolve(d): （已）解决 reject(ed): （已）拒绝 onFulfilled: 已履行（事件） onRejected: 已拒绝（事件） then: 然后，接下来 catch:
深入理解ES6：ReactJS入门基础
ES6，全称ECMAScript 2015，引入了大量的新特性和语法糖，如类（classes）、模块（modules）、箭头函数（arrow functions）、模板字符串（template literals）、解构赋值（destructuring）、let和const声明、Promise...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值