1. promise（期约）是什么？
一种异步程序执行的机制。
ECMAScript 6 新增的引用类型 Promise，可以通过 new 操作符来实例化。创建新期约时需要传入执行器（executor）函数作为参数。
1.1 promise三种状态
Promise 的状态
实例对象中的一个属性 『PromiseState』
- pending（待定）
- fulfilled /（resolved解决）（成功）
- rejected（拒绝）
pending 是promise的最初始状态。有两个转换方向：
1.成功（fulfilled or resolved）状态。
2.失败的拒绝（rejected）状态。
无论落定为哪种状态都是不可逆的，即一旦转换，状态不再改变。也就是说如果
只有异步操作的结果，可以决定当前是哪一种状态，一旦状态改变（从pending变为fulfilled和从pending变为rejected），就不会再变，任何时候都可以得到这个结果。这也是Promise这个名字的由来，它的英语意思就是“期约”，表示其他手段无法改变。
1.1.1 promise的状态是私有的
promise的状态是私有的，不能直接通过 JavaScript 检测到，也不能被外部 JavaScript 代码修改。
这主要是为了避免根据读取到的promise状态，以同步方式处理promise对象。
promise故意将异步行为封装起来，从而隔离外部的同步代码。
1.2 promise有什么？
想知道promise是什么，可以先console.dir(Promise)看它有什么。
如下： promise是一个构造函数，有all()方法、race()方法、rejected()方法、resolved()等方法方法。
原型链上有then()、catch()等方法。
1.3 resolve、rejected方法
promise实例对象中的一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果。
- resolve将Promise对象的状态从“未完成”变为“成功”在异步操作成功时调用，并将异步操作的结果，作为参数传递出去.
- reject 将Promise对象的状态从“未完成”变为“失败”，将异步操作报出的错误，作为参数传递出去。
Promise.resolve 方法: (value) => {}
value: 成功的数据或 promise 对象
说明: 返回一个成功/失败的 promise 对象
5. Promise.reject 方法: (reason) => {}
reason: 失败的原因
说明: 返回一个失败的 promise 对象
1.4 then() 方法
then方法可以接受2个回调函数作为参数。
第一个回调函数是promise对象的状态变为resolved的时候调用，
第二个回调函数是promise对象的状态变为rejected时调用。
其中第二个函数是可选的，不一定需要提供。
这两个函数都接受Promise对象传出的值作为参数。
let p = new Promise((resolve , reject) => {
fs.readFile('./resource/content.tx', (err, data) => {
//如果失败了, 调用 reject(), 指定失败的 reason, 变为
rejected 状态
if(err) reject(err);
//如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状 态
resolve(data);
});
});
//调用 then
p.then(value=>{
//成功的回调，得到成功的 vlaue
console.log(value.toString());
}, reason=>{
//失败的回调, 得到失败的 reason
console.log(reason);
});
1.4.1什么是回调地狱?
回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函
数执行的条件。
回调地狱的缺点：不便于阅读 / 不便于异常处理。
1.4.2promise 链式调用解决回调地狱
/*
回调地狱
*/
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult)
}, failureCallback)
}, failureCallback)
}, failureCallback)
/*
使用 promise 的链式调用解决回调地狱
*/
doSomething().then(function(result) {
return doSomethingElse(result)
})
.then(function(newResult) {
return doThirdThing(newResult)
})
.then(function(finalResult) {
console.log('Got the final result: ' + finalResult)
})
.catch(failureCallback)
/*
async/await: 回调地狱的终极解决方案
*/
async function request() {
try {
const result = await doSomething()
const newResult = await doSomethingElse(result)
const finalResult = await doThirdThing(newResult)
console.log('Got the final result: ' + finalResult) } catch (error) {
failureCallback(error) } }
1.5 catch() 方法
效果和写在then的第二个参数里面一样。不过它还有另外一个作用：在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。
Promise.prototype.catch 方法: (onRejected) => {}
onRejected 函数: 失败的回调函数 (reason) => {}
说明: then()的语法糖, 相当于: then(undefined, onRejected)
1.6 Promise.all 方法
all 顾名思义，就是所有的意思，跟promise联合起来就是，所有的成功了，才算成功，只要有一个失败就是失败。
（大家好才是真的好！！！）
Promise.all 方法: (promises) => {}
(1) promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就
直接失败
1.7 Promise.race 方法
race 竞赛的意思，谁先执行完，它的状态就是最终状态。
Promise.race 方法: (promises) => {}
(1) promises: 包含 n 个 promise 的数组
说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态
2. 用法
2.1promise基本用法
Promise 构造函数: Promise (excutor) {}
(1) executor 函数: 执行器 (resolve, reject) => {}
(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}
(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}
说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行
2.1.1注意
先新建一个promise实例，用一个常量接受。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const p = new Promise((resolve, reject)=>{
setTimeout(() => {
console.log('hhh')
}, 1000);
});
</script>
</body>
</html>
这时候我只是new了一个对象，但没有调用，打开控制台，它就已经帮我打印了hhh。
所以一般把它封装起来使用。比如封装Ajax。
2.2封装Ajax
/**
* 封装一个函数 sendAJAX 发送 GET AJAX 请求
* 参数 URL
* 返回结果 Promise 对象
*/
function sendAJAX(url){
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET", url);
xhr.send();
//处理结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
//判断成功
if(xhr.status >= 200 && xhr.status < 300){
//成功的结果
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
});
}
sendAJAX('https://api.apiopen.top/getJok')
.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
3.几个要点
3.1如何改变 promise 的状态
(1) resolve(value): 如果当前是 pending 就会变为 resolved
(2) reject(reason): 如果当前是 pending 就会变为 rejected
(3) 抛出异常: 如果当前是 pending 就会变为 rejected
3.2 一个 promise 指定多个成功/失败回调函数, 都会调用吗?
当 promise 改变为对应状态时都会调用
3.3 改变 promise 状态和指定回调函数谁先谁后
(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2) 如何先改状态再指定回调?
① 在执行器中直接调用 resolve()/reject()
② 延迟更长时间才调用 then()
(3) 什么时候才能得到数据?
① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
3.4 promise.then()返回的新 promise 的结果状态由什么决定
(1) 简单表达: 由 then()指定的回调函数执行的结果决定
(2) 详细表达:
① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
3.5 promise 如何串连多个操作任务
(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
(2) 通过 then 的链式调用串连多个同步/异步任务
3.6 promise 异常传透
(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
3.7 中断 promise 链
(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
