【ES6】阮一峰ES6学习之Promise(一)

Promise

- 一、含义
- - 1. 概念
  - 2. 特点
  - 3. 基本用法
  - 4. 为什么要用 Promise
  - - 1. 指定回调函数的方式更加灵活
    - 2. 支持链式调用，可以解决回调地狱的问题
    - 用Promise实现Ajax
- 二、Promise的使用
- - 1. Promise 构造函数：Promise(executor) {}
  - 2. Promise.prototype.then 方法: `(onResolved, onRejected) => {}`
  - 3. Promise.resolve 方法: `Promise.resolve(value) => {}`
  - 4. Promise.reject 方法: `Promise.resolve(reason) => {}`
  - 5. Promise.all 方法: `Promise.all(iterable) => {}`
  - 7. Promise.race方法：Promise.race(iterable) => {}
- 三、promise 的几个关键问题
- - 1. 如何改变 promise 的状态?
  - 2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?
  - 3. 改变 promise 状态和指定回调函数谁先谁后?
  - 4. promise.then()返回的新 promise 的结果状态由什么决定?
  - 5. promise 如何串连多个操作任务?
  - 6. 中断 promise 链?

一、含义

Promise 是异步编程的一种解决方案

1. 概念

简单来说就是一个容器，里面保存着未来才会结束的事件( 通常是一个异步操作 )的结果。从语法上来说，Promise是个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

异步编程：fs文件操作，数据库操作，Ajax，定时器；

2. 特点

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态
- pending：进行中
- fulfilled：已成功
- rejected：已失败
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再改变，任何时候都可以得到这个结果。状态改变只有两种状态从pending变为fulfilled和从pending变为rejected。

3. 基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

// Promise构造函数接受一个函数（执行器函数）作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
const promise = new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){// 在异步操作成功时调用，并将异步操作的结果，作为参数value传递出去；resolve(value);} else {// 在异步操作失败时调用，并将异步操作报出的错误，作为参数error/reason传递出去。reject(error);}
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {// success
}, function(error) {// failure
});

then方法可以接受两个回调函数作为参数。

第一个回调函数是Promise对象的状态变为resolved时调用
第二个回调函数是Promise对象的状态变为rejected时调用。

这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

// 创建一个新的p对象promise
const p = new Promise((resolve, reject) => { // 执行器函数// 执行异步操作任务setTimeout(() => {const time = Date.now() // 如果当前时间是偶数代表成功，否则失败if (time % 2 == 0) {// 如果成功，调用resolve(value)resolve('成功的数据，time=' + time)} else {// 如果失败，调用reject(reason)reject('失败的数据，time=' + time)}}, 1000);
})p.then(value => { // 接收得到成功的value数据 onResolvedconsole.log('成功的回调', value)  // 成功的回调 成功的数据，time=1615015043258},reason => { // 接收得到失败的reason数据 onRejectedconsole.log('失败的回调', reason)    // 失败的回调 失败的数据，time=1615014995315}
)

4. 为什么要用 Promise

1. 指定回调函数的方式更加灵活

旧的：必须在启动异步任务前指定

// 1. 纯回调的形式
// 成功的回调函数
function successCallback(result) {console.log("声音文件创建成功：" + result);
}
// 失败的回调函数
function failureCallback(error) {console.log("声音文件创建失败：" + error);
}
// 必须先指定回调函数，再执行异步任务
createAudioFileAsync(audioSettings, successCallback, failureCallback) // 回调函数在执行异步任务（函数）前就要指定

promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)

// 2. 使用Promise
const promise = createAudioFileAsync(audioSettings);  // 执行2秒
setTimeout(() => {promise.then(successCallback, failureCallback) // 也可以获取
}, 3000);

2. 支持链式调用，可以解决回调地狱的问题

回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是其内部嵌套的回调函数执行的条件。

doSomething(function(result) {doSomethingElse(result, function(newResult) {doThirdThing(newResult, function(finalResult) {console.log('Got the final result:' + finalResult)}, failureCallback)}, failureCallback)
}, failureCallback)

使用 promise 的链式调用解决回调地狱

doSomething().then(result => doSomethingElse(result)).then(newResult => doThirdThing(newResult)).then(finalResult => {console.log('Got the final result:' + finalResult)}).catch(failureCallback)

用Promise实现Ajax

const getJSON = function(url) {const promise = new Promise(function(resolve, reject){const handler = function() {if (this.readyState !== 4) {return;}if (this.status === 200) {resolve(this.response);} else {reject(new Error(this.statusText));}};const client = new XMLHttpRequest();client.open("GET", url);client.onreadystatechange = handler;client.responseType = "json";client.setRequestHeader("Accept", "application/json");client.send();});return promise;
};getJSON("/posts.json").then(function(json) {console.log('Contents: ' + json);
}, function(error) {console.error('出错了', error);
});

上面代码中，getJSON是对 XMLHttpRequest 对象的封装，用于发出一个针对 JSON 数据的 HTTP 请求，并且返回一个Promise对象。需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数。

二、Promise的使用

1. Promise 构造函数：Promise(executor) {}

executor 函数：同步执行 (resolve, reject) => {}
resolve 函数：内部定义成功时调用的函数 resove(value)
reject 函数：内部定义失败时调用的函数 reject(reason)

说明：executor 是执行器，会在 Promise 内部立即同步回调，异步操作 resolve/reject 就在 executor 中执行

2. Promise.prototype.then 方法: `(onResolved, onRejected) => {}`

指定两个回调（成功+失败）

(1) onResolved 函数: 成功的回调函数 (value) => {}

(2) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 指定用于得到成功value的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象

2、Promise.prototype.catch 方法: p.(onRejected) => {}

指定失败的回调

(1) onRejected 函数: 失败的回调函数 (reason) => {}

说明: 这是then()的语法糖, 相当于: then(undefined, onRejected)

new Promise((resolve, reject) => { // excutor执行器函数setTimeout(() => {if(...) {resolve('成功的数据') // resolve()函数} else { reject('失败的数据') //reject()函数}}, 1000)
}).then(value => { // onResolved()函数console.log(value) // 成功的数据
}).catch(reason => { // onRejected()函数console.log(reason) // 失败的数据}
)

3. Promise.resolve 方法: `Promise.resolve(value) => {}`

返回一个成功/失败的 promise 对象

value: 成功的数据或 promise 对象

1.如果传入的参数为非Promise类型的对象, 则返回的结果为成功promise对象

let p1 = Promise.resolve(521);
console.log(p1); // Promise {<fulfilled>: 521}

在这里插入图片描述
2. 如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果

let p2 = Promise.resolve(new Promise((resolve, reject) => {// resolve('OK'); // 成功的Promisereject('Error');
}));
console.log(p2);
p2.catch(reason => {console.log(reason);
})

在这里插入图片描述

4. Promise.reject 方法: `Promise.resolve(reason) => {}`

(1) reason: 失败的原因

说明: 返回一个失败的 promise 对象

let p = Promise.reject(521);
let p2 = Promise.reject('iloveyou');
let p3 = Promise.reject(new Promise((resolve, reject) => {resolve('OK');
}));console.log(p);
console.log(p2);
console.log(p3);

在这里插入图片描述
Promise.resolve() / Promise.reject() 方法就是一个语法糖,用来快速得到Promise对象

5. Promise.all 方法: `Promise.all(iterable) => {}`

iterable：包含 n 个 promise 的可迭代对象，如 Array 或 String
返回一个新的 promise，只有所有的 promise都成功才成功，只要有一个失败了就直接失败。

let p1 = new Promise((resolve, reject) => {resolve('OK');
})
let p2 = Promise.resolve('Success');
let p3 = Promise.resolve('Oh Yeah');const result = Promise.all([p1, p2, p3]);
console.log(result);

在这里插入图片描述

let p1 = new Promise((resolve, reject) => {resolve('OK');
})
let p2 = Promise.reject('Error');
let p3 = Promise.resolve('Oh Yeah');const result = Promise.all([p1, p2, p3]);
console.log(result);

在这里插入图片描述

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.reject(3)const pAll = Promise.all([p1, p2, p3])
const pAll2 = Promise.all([p1, p2])
//因为其中p3是失败所以pAll失败
pAll.then(
value => {console.log('all onResolved()', value)},
reason => {console.log('all onRejected()', reason) }
)
// all onRejected() 3
pAll2.then(
values => {console.log('all onResolved()', values)},
reason => {console.log('all onRejected()', reason) }
)
// all onResolved() [1, 2]

7. Promise.race方法：Promise.race(iterable) => {}

iterable：包含 n 个 promise 的可迭代对象，如 Array 或 String
返回一个新的 promise, 第一个完成的 promise的结果状态就是最终的结果状态。

const pRace = Promise.race([p1, p2, p3])
// 谁先完成就输出谁(不管是成功还是失败)
const p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve(1)}, 1000)
})
const p2 = Promise.resolve(2)
const p3 = Promise.reject(3)pRace.then(
value => {console.log('race onResolved()', value)},
reason => {console.log('race onRejected()', reason) }
)
//race onResolved() 2

let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('OK');}, 1000);
})
let p2 = Promise.resolve('Success');
let p3 = Promise.resolve('Oh Yeah');//调用
const result = Promise.race([p1, p2, p3]);console.log(result);

在这里插入图片描述

三、promise 的几个关键问题

1. 如何改变 promise 的状态?

(1) resolve(value): 如果当前是 pending 就会变为 resolved

(2) reject(reason): 如果当前是 pending 就会变为` rejected``

(3) 抛出异常: 如果当前是 pending就会变为 rejected

const p = new Promise((resolve, reject) => {//resolve(1) // promise变为resolved成功状态//reject(2) // promise变为rejected失败状态throw new Error('出错了') // 抛出异常，promise变为rejected失败状态，reason为抛出的error
})
p.then(value => {},reason => {console.log('reason',reason)}
)
// reason Error:出错了

2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

当 promise 改变为对应状态时都会调用

const p = new Promise((resolve, reject) => {//resolve(1)reject(2)
})
p.then(value => {},reason => {console.log('reason',reason)}
)
p.then(value => {},reason => {console.log('reason2',reason)}
)
// reason 2
// reason2 2

3. 改变 promise 状态和指定回调函数谁先谁后?

(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

(2) 如何先改状态再指定回调?

① 在执行器中直接调用 resolve()/reject()

② 延迟更长时间才调用 then()

let p = new Promise((resolve, reject) => {// setTimeout(() => {resolve('OK');// }, 1000); // 有异步就先指定回调，否则先改变状态
});p.then(value => {console.log(value);
},reason=>{})

(3) 什么时候才能得到数据?

① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据

② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

new Promise((resolve, reject) => {setTimeout(() => {resolve(1) // 改变状态}, 1000)
}).then( // 指定回调函数 （先指定）value => {},reason =>{}
)

此时，先指定回调函数，保存当前指定的回调函数；后改变状态(同时指定数据)，然后异步执行之前保存的回调函数。

new Promise((resolve, reject) => {resolve(1) // 改变状态
}).then( // 指定回调函数value => {},reason =>{}
)

这种写法，先改变的状态(同时指定数据)，后指定回调函数(不需要再保存)，直接异步执行回调函数

4. promise.then()返回的新 promise 的结果状态由什么决定?

(1) 简单表达: 由 then()指定的回调函数执行的结果决定

let p = new Promise((resolve, reject) => {resolve('ok');
});
//执行 then 方法
let result = p.then(value => {console.log(value);
}, reason => {console.warn(reason);
});console.log(result);

在这里插入图片描述

(2) 详细表达:

① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

let p = new Promise((resolve, reject) => {resolve('ok');
});
//执行 then 方法
let result = p.then(value => {//1. 抛出错误throw '出了问题';
}, reason => {console.warn(reason);
});console.log(result);

在这里插入图片描述
② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

let p = new Promise((resolve, reject) => {resolve('ok');
});
//执行 then 方法
let result = p.then(value => {//2. 返回结果是非 Promise 类型的对象return 521;
}, reason => {console.warn(reason);
});console.log(result);

在这里插入图片描述

③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

let p = new Promise((resolve, reject) => {resolve('ok');
});
//执行 then 方法
let result = p.then(value => {//3. 返回结果是 Promise 对象return new Promise((resolve, reject) => {// resolve('success');reject('error');});
}, reason => {console.warn(reason);
});console.log(result);

在这里插入图片描述

new Promise((resolve, reject) => {resolve(1)
}).then(value => {console.log('onResolved1()', value)},reason => {console.log('onRejected1()', reason)}
).then(value => {console.log('onResolved2()', value)},reason => {console.log('onRejected2()', reason)}
)
// onResolved1() 1
// onResolved2() undefined

new Promise((resolve, reject) => {resolve(1)
}).then(value => {console.log('onResolved1()', value)//return 2                   // onResolved2() 2//return Promise.resolve(3)  // onResolved2() 3//return Promise.reject(4)   // onRejected2() 4//throw 5                    // onRejected2() 5},reason => {console.log('onRejected1()', reason)}
).then(value => {console.log('onResolved2()', value)},reason => {console.log('onRejected2()', reason)}
)
// onResolved1() 1
// onResolved2() undefined
// Promise {<fulfilled>: undefined}
// 对应输出如上所示

5. promise 如何串连多个操作任务?

(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用

(2) 通过 then 的链式调用串连多个同步/异步任务

let p = new Promise((resolve, reject) => {setTimeout(() => {resolve('OK');}, 1000);
});p.then(value => {return new Promise((resolve, reject) => {resolve("success");});
}).then(value => {console.log(value); // success
}).then(value => {console.log(value); // undefined
})

new Promise((resolve, reject) => {setTimeout(() => {console.log('执行任务1(异步)')resolve(1)}, 1000)
}).then(value => {console.log('任务1的结果', value)console.log('执行任务2(同步)')return 2 // 同步任务直接return返回结果}
).then(value => {console.log('任务2的结果', value)return new Promise((resolve, reject) => { // 异步任务需要包裹在Promise对象中setTimeout(() => {console.log('执行任务3(异步)')resolve(3)}, 1000)})}
).then(value => {console.log('任务3的结果', value)}
)
// 执行任务1(异步)
// 任务1的结果 1
// 执行任务2(同步)
// 任务2的结果 2
// 执行任务3(异步)
// 任务3的结果 3

6. 中断 promise 链?

(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

(2) 办法: 在回调函数中返回一个pendding状态的promise对象

new Promise((resolve, reject) => {//resolve(1)reject(1)
}).then(value => {console.log('onResolved1()', value)return 2}
).then(value => {console.log('onResolved2()', value)return 3}
).then(value => {console.log('onResolved3()', value)}
).catch(reason => {console.log('onRejected1()', reason)}
).then(value => {console.log('onResolved4()', value)},reason => {console.log('onRejected2()', reason)}
)
// onRejected1() 1
// onResolved4() undefined