一、promise
1、介绍
Promise 是异步编程的一种解决方案，比传统的解决方案“回调函数和事件”，更合理和更强大。
异步操作的优点：
- 链式操作减低了编码难度（解决回调地狱问题）
- 代码可读性明显增强
状态
promise对象仅有三种状态
pending（进行中）fulfilled（已成功）rejected（已失败）
特点：
（1）对象的状态不受外界影响。只有异步操作的结果，可以决定当前是哪一种状态。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果（从pending变为fulfilled和从pending变为rejected）。
2、基本用法
Promise对象是一个构造函数，用来生成Promise实例
const promise = new Promise(function(resolve, reject) {});Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
// 第一个回调在resolve时调用，第二个回调在rejected时调用
promise.then(function(value) {
// success
}, function(error) {
// failure
});
promise.then(function(value) {
// success
}).catch(function(value) {
// failure
});Promise 新建后就会立即执行，可以来看个例子：
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved.promise新建之后立即执行，因此打印了Promise，then方法的回调函数是在当前脚本所有同步任务执行完才会执行，因此resolved.最后输出。
3、实例方法
Promise构建出来的实例存在以下方法：
then()catch()finally()
then()
then是实例状态发生改变时的回调函数,第一个参数在resolve时调用，第二个参数在rejected时调用
then方法返回新的promise实例，可以进行链式写法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
}, function (err){
console.log("rejected: ", err);
});catch()
catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数
const promise = new Promise(function(resolve, reject) {
throw new Error('test');
});
promise.catch(function(error) {
console.log(error);
});
// Error: test
//上面代码中，promise抛出一个错误，就被catch()方法指定的回调函数捕获。注意，上面的写法与下面两种写法是等价的。
// 写法一
const promise = new Promise(function(resolve, reject) {
try {
throw new Error('test');
} catch(e) {
reject(e);
}
});
promise.catch(function(error) {
console.log(error);
});
// 写法二
const promise = new Promise(function(resolve, reject) {
reject(new Error('test'));
});
promise.catch(function(error) {
console.log(error);
});
比较上面两种写法，可以发现reject()方法的作用，等同于抛出错误注意事项：
（1）try...catch 不能捕获无效js代码
try {
===
} catch(err) {
// 不会执行
console.log(err)
}（2）try...catch 不能捕获异步代码
try {
setTimeout(() => {console.log(1)}, 1000)
} catch(err) {
console.log(err)
}getJSON('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 getJSON 和 前一个回调函数运行时发生的错误
console.log('发生错误！', error);
});Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前面三个Promise产生的错误
});一般来说，使用catch方法代替then()第二个参数
Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错，因为x没有声明
resolve(x + 2);
});
};浏览器运行到这一行，会打印出错误提示ReferenceError: x is not defined，但是不会退出进程
catch()方法之中，还能再抛出错误，通过后面catch方法捕获到（再写一个catch方法捕获异常）。
const someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错，因为x没有声明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
// 下面一行会报错，因为 y 没有声明
y + 2;
}).then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
finily()
finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});finally方法总是会返回原来的值。
// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})
// resolve 的值是 2
Promise.resolve(2).finally(() => {})
// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})
// reject 的值是 3
Promise.reject(3).finally(() => {})4、构造函数
Promise构造函数存在以下方法：
all()race()allSettled()resolve()reject()try()
all()
all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例
const p = Promise.all([p1, p2, p3]);p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
作为参数的promise实例定义了catch方法，发生rejected时不会触发promise.call的catch方法。如果没有定义catch方法，则就会调用Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(result => result)
.catch(e => e);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(result => result)
.catch(e => e);
Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]5、使用场景
（1）将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};（2）当下个异步请求依赖上个请求结果的时候，我们也能够通过链式操作友好解决问题
（3）实现多个请求合并在一起，汇总所有请求结果
二、async
1、介绍
async函数的返回值是 Promise 对象
进一步说，async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。
2、语法
async function name([param[, param[, ... param]]]) { statements }name： 函数名称。param：要传递给函数的参数的名称。statements： 函数体语句。
async后面跟着函数，不能跟着其它字符（如数字、字符串等）
3、基本用法
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。
async function helloAsync(){
return "helloAsync";
}
console.log(helloAsync()) // Promise {: "helloAsync"}
helloAsync().then(v=>{
console.log(v); // helloAsync
}) async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。
function testAwait(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("testAwait");
resolve();
}, 1000);
});
}
// 等同于
async function testAwait(){
await new Promise((resolve) => {
setTimeout(function(){
console.log("testAwait");
resolve();
}, 1000);
});
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsyncasync函数会返回一个promise，状态值是resolved
1、在async函数中写return，那么Promise对象resolve的值就是是undefined
2、rerun的值作为resolved的值
三、await
1、介绍
await后面接一个会return new promise的函数并执行它await只能放在async函数里
2、语法
[return_value] = await expression;expression: 一个 Promise 对象或者任何要等待的值。
3、基本用法
await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值
async function f() {
// 等同于
// return 123;
return await 123;
}
f().then(v => console.log(v))
// 123await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。
function testAwait(){
console.log("testAwait");
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsyncawait针对所跟不同表达式的处理方式：
Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
非 Promise 对象：直接返回对应的值。
任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
f().then().catch() // catch捕获异常想要前一个异步操作失败，也不要中断后面的异步操作
1、使用try..catch
2、await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。
4、注意点
1、多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。
let foo = await getFoo();
let bar = await getBar();
// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;2、await命令只能用在async函数之中，如果用在普通函数，就会报错
// 报错
async function hh() {
setTimeout(() => {await b()},1000)
}
// 正确写法
function hh() {
setTimeout(async () => {await b()},1000) // await紧跟着async
}四、思考题
console.log('script start')
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
return 'async then'
}
async function async2() {
console.log('async2 end')
}
async1()
setTimeout(function() {
console.log('setTimeout')
}, 0)
async1().then(function (message) { console.log(message) })
new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
console.log('script end')