Promise介绍

Promise是一个对象，它代表了一个异步操作的最终完成或者失败，及其结果值。
本质上Promise是一个函数返回的对象，可以在它上面绑定回调函数，这样就不需要再一开始把回调函数作为参数传入这个函数。

Promise语法

executor是带有resolve和reject两个参数的函数。
Promise构造函数执行时立即调用executor函数，resolve和reject两个函数作为参数传递给executor。
resolve和reject函数被调用时，分别将Promise的状态改为fulfilled(完成)或rejected(失败)。
executor内部通常会执行一些异步操作，一旦异步操作执行完毕，成功时调用resolve函数将Promise状态改成fulfilled，失败时调用reject函数将Promise状态改成rejected。
如果在executor函数中抛出一个错误，那么该Promise状态为rejected。executor`函数的返回值会被忽略

new Promise( function(resolve, reject) {...} /* executor */  );

Promise描述

一个Promise有以下几种状态:
- pending: 初始状态，既不是成功，也不是失败状态。
- fulfilled: 意味着操作成功完成。
- rejected: 意味着操作失败。
pending状态的Promise对象可能会变为fulfilled状态并传递一个值给相应的状态处理方法，也可能变为失败状态rejected并传递失败信息。
当其中任一种情况出现时，Promise对象的then方法绑定的处理方法handlers就会被调用。
- then方法包含两个参数：onfulfilled和onrejected，它们都是Function类型。
当Promise状态为fulfilled时，调用then的onfulfilled方法。

let a = new Promise((resolve, reject) => {
    resolve('操作成功！')
});

a.then(value => {
    // 操作成功！ onfulfilled
    console.log(value, 'onfulfilled')
}, err => {
    console.log(err, 'onRejected')
});

当Promise状态为rejected时，调用then的onrejected方法。

let a = new Promise((resolve, reject) => {
    reject('操作失败！')
});

a.then(value => {
    console.log(value, 'onfulfilled')
}, err => {
    //操作失败！ onRejected
    console.log(err, 'onRejected')
});

Promise方法

Promise.all(iterable)

Promise.all(iterable)方法返回一个Promise实例，此实例在iterable参数内所有的promise都完成resolved。
如果参数中promise有一个失败rejected，此实例回调失败reject，失败的原因是第一个失败promise的结果。
- 如果你传入的promise中，有四个promise在一定的时间之后调用成功函数，有一个立即调用失败函数，那么Promise.all将立即变为失败。
此方法在集合多个promise的返回结果时很有用，它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。

// 全部执行结果为成功时
let a = new Promise((resolve, reject) => {
    resolve(1)
});
let b = Promise.resolve(2);
// 如果非promise值，这些值将被忽略，但仍然会被放在返回数组中
let c = 3;
Promise.all([a, b, c]).then(value => {
    // [1,2,3]
    console.log(value)
});

// b执行失败，返回第一个失败的结果
let a = new Promise((resolve, reject) => {
    resolve(1)
});
let b = Promise.reject(2);
let c = Promise.reject(3);
Promise.all([a, b, c]).then(value => {
    console.log(value)
}, err => {
    // 2
    console.log(err)
});

Promise.race(iterable)

Promise.race(iterable)方法返回一个promise，一旦迭代器中的某个promise解决或拒绝，返回的promise就会解决或拒绝。
可以理解为竞速，谁先执行完返回谁的结果。

let a = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('a')
    }, 100)
});

let b = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('b')
    }, 500)
});

Promise.race([a, b]).then(res => {
    // a更快所以返回a的结果
    console.log(res)
})

Promise.reject()

Promise.reject()方法返回一个带有失败原因的Promise对象。

let a = Promise.reject('失败了！！');

a.then(res => {
    console.log(res)
}, err => {
    //失败了！！
    console.log(err)
});

Promise.resolve()

Promise.resolve()方法返回一个以给定值解析后的Promise对象。

let a = Promise.resolve('成功了！！');

a.then(res => {
    //成功了！！
    console.log(res)
}, err => {
    console.log(err)
});

Promise原型方法

Promise.prototype.then(onFulfilled, onRejected)

then()方法返回一个Promise。它最多需要有两个参数：Promise的成功和失败情况的回调函数。
onFulfilled当Promise变成接受状态fulfilled时调用的函数。
onRejected当Promise变成拒绝状态rejected时调用的函数。

let a = Promise.resolve('成功了');
a.then(res => {
    // 成功了
    console.log(res)//成功时
}, err => {
    console.log(err)//失败时
})

链式调用
- then方法返回一个Promise对象，其允许方法链。

// 链式调用 
let a = Promise.resolve('成功了');
a.then(res => {
    return Promise.reject('失败了');
}, err => {
    console.log(err)
}).then(res => {
    console.log(res)
}, err => {
    // 失败了
    console.log(err)
})

Promise.prototype.catch(onRejected)

catch()方法返回一个Promise，并且处理拒绝的情况。

// catch链式操作 1
let a = Promise.reject('失败了1');
a.then(res => {
    console.log(res)
}).catch(err => {
    // 失败了1
    console.log(err);
    return Promise.reject('失败了2');
}).then(res => {
    console.log(res)
}).catch(err => {
    // 失败了2'
    console.log(err)
})

// catch链式操作 2
new Promise((resolve, reject) => {
    console.log('初始化');
    resolve();
}).then(() => {
    throw new Error('有哪里不对了');
    console.log('执行「这个」”');
}).catch(() => {
    console.log('执行「那个」');
}).then(() => {
    console.log('执行「这个」，无论前面发生了什么');
});
// 最终输出结果
// 初始化
// 执行“那个”
// 执行“这个”，无论前面发生了什么

如果then函数中有onRejected回调函数，catach不会执行

let a = Promise.reject('失败了');
a.then(res => {
    console.log(res);
}, err => {
    // 失败了 1
    console.log(err, 1);
}).catch(err => {
    console.log(err, 2);
});

Promise.prototype.finally(onFinally)

finally()方法返回一个Promise。在promise结束时，无论结果是fulfilled或者是rejected，都会执行指定的回调函数。
由于无法知道promise的最终状态，所以finally的回调函数中不接收任何参数，它仅用于无论最终结果如何都要执行的情况。

let a = Promise.reject('失败了');
a.then(res => {
    console.log(res);
}).catch(err => {
    // 失败了
    console.log(err);
}).finally(() => {
    // 123
    console.log(123)
})

JS中String字符串对象常用属性和方法

JS中模块的暴露和引入方式

本文作者：Ihuzb

永久链接：https://ihuzb.github.io/2019/06/30/ZRn6kBsoy4/