JavaScript中的Promise和async/await
一、同步与异步有何不同：
1.JavaScript是单线程的语言
2.异步不会阻塞代码执行
3.同步会阻塞代码执行
二、异步的应用场景：需要等待的情况
1.网络请求，如ajax图片加载
2.定时任务，如setTimeout
三、promise的基本使用：
1.通过串行的方式解决了回调地狱的问题
2.手写promise加载图片：
function loadImg(src) {
const p = new Promise(
(resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
const err = new Error(`图片加载失败 ${src}`)
reject(err)
}
img.src = src
}
)
return p
}
const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'
loadImg(url1).then(img1 => {
console.log(img1.width)
return img1 // 普通对象
}).then(img1 => {
console.log(img1.height)
return loadImg(url2) // promise 实例
}).then(img2 => {
console.log(img2.width)
return img2
}).then(img2 => {
console.log(img2.height)
}).catch(ex => console.error(ex))
四、promise的状态：
1.三种状态：
（1）pending（过程中）、resolved（解决了，也叫fulfilled）、rejected（失败了）
（2）pending => resolved 或 pending => rejecte
（3）变化不可逆
// 刚定义时，状态默认为 pending
const p1 = new Promise((resolve, reject) => {
})
// 执行 resolve() 后，状态变成 resolved
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
})
})
// 执行 reject() 后，状态变成 rejected
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject()
})
})
2.状态的表现和变化：
（1）pending状态，不会触发then和catch
（2）resolved状态，会触发后续的then回调函数
（3）rejected状态，会触发后续的catch回调函数
// 直接返回一个 resolved 状态
Promise.resolve(100)
// 直接返回一个 rejected 状态
Promise.reject('some error')
3.then和catch对状态的影响：
（1）then正常情况下返回resolved，里面有报错则返回rejected
（2）catch正常情况下返回resolved，里面有报错则返回rejected
// then() 一般正常返回 resolved 状态的 promise
Promise.resolve().then(() => {
return 100
})
// then() 里抛出错误，会返回 rejected 状态的 promise
Promise.resolve().then(() => {
throw new Error('err')
})
// catch() 不抛出错误，会返回 resolved 状态的 promise
Promise.reject().catch(() => {
console.error('catch some error')
})
// catch() 抛出错误，会返回 rejected 状态的 promise
Promise.reject().catch(() => {
console.error('catch some error')
throw new Error('err')
})
五、promise题目：
// 第一题，答案是1、3
Promise.resolve().then(() => {
console.log(1)
}).catch(() => {
console.log(2)
}).then(() => {
console.log(3)
})
// 第二题，答案是1、2、3
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
console.log(1)
throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
console.log(2)
}).then(() => {
console.log(3)
})
// 第三题，答案是1、2
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
console.log(1)
throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
console.log(2)
}).catch(() => {
console.log(3)
})
六、async/await：
1.背景：
（1）异步回调的callback hell
（2）Promise then catch链式调用，但也是基于回调函数
（3）async/await是同步语法，消灭回调函数
2.基本使用：
function loadImg(src) {
const promise = new Promise((resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error(`图片加载失败 ${src}`))
}
img.src = src
})
return promise
}
async function loadImg1() {
const src1 = 'http://www.imooc.com/static/img/index/logo_new.png'
const img1 = await loadImg(src1)
return img1
}
async function loadImg2() {
const src2 = 'https://avatars3.githubusercontent.com/u/9583120'
const img2 = await loadImg(src2)
return img2
}
(async function () {
// 注意：await 必须放在 async 函数中，否则会报错
try {
// 加载第一张图片
const img1 = await loadImg1()
console.log(img1)
// 加载第二张图片
const img2 = await loadImg2()
console.log(img2)
} catch (ex) {
console.error(ex)
}
})()
3.async/await和Promise的关系：async/await可以消灭异步回调，但它和Promise并不互斥，两者相辅相成
（1）执行async函数，返回的是Promise对象（如果函数内没返回Promise对象，或者直接返回一个数值，则自动封装成Promise对象）
（2）await相当于Promise的then
A.可以声明一个变量接收函数的返回值：
这里的data2接收了fn1的返回值
B.await后面可以跟Promise对象、数值、一个async函数的返回值（async函数的返回值相当于Promise对象）：
C.await后面跟rejected的Promise对象，则不会执行，所以要用try...catch捕获：
!(async function () {
const p3 = Promise.reject('some err')
const res = await p3
console.log(res) // 不会执行，因为await相当于then
})()
D.await是同步写法，但本质还是异步调用。只要遇到了await，后面的代码都相当于放在 callback 里：
async function async1 () {
console.log('async1 start')
await async2()
console.log('async1 end') // 关键在这一步，它相当于放在 callback 中，最后执行
}
async function async2 () {
console.log('async2')
}
console.log('script start')
async1()
console.log('script end')
（3）用try...catch可捕获异常，代替了Promise的catch
!(async function () {
const p4 = Promise.reject('some err')
try {
const res = await p4
console.log(res)
} catch (ex) {
console.error(ex)
}
})()
用try...catch捕获异常使语法更加标准化（像其他语言一样）
4.总结：
（1）async函数封装了Promise
（2）await相当于Promise的then，处理Promise成功的情况
七、async/await的本质：
1.async/await可以消灭异步回调
2.JavaScript还是单线程，还是得有异步，还是得基于事件循环（event loop）
3.async/await只是语法糖，只是从语法层面解决了异步回调
八、async/await题目：
1.第一题，答案：a是一个promise对象，b是100，因为async函数返回一个promise，而await相当于promise里面的then
2.第二题，答案：先打印start，然后a是100，b是200，执行到打印c会报错，然后后面的代码都不会执行了，因为await相当于then，只执行resolved，而这里是rejected，需要try..catch来执行
3.第三题，答案：依次打印script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout，原因：
（1）setTimeout是宏任务
（2）await后面的都作为回调内容，是微任务
（3）初始化promise时，传入的函数会立刻被执行
（4）then后面的回调是微任务
4.第四题（请使用Promise.all并行请求数据）：
const getInfo = async(qq, callback) => {
let baseInfo
let payInfo
try {
let uidData = await axios.get('http://test.com/getUid', { params: { qq } })
if(uidData.ret === 0) {
let uid = uidData.uid
let [baseInfoData, payInfoData] = await Promise.all([
axios.get('http://test.com/getBaseInfo', { params: { uid } }),
axios.get('http://test.com/getPayInfo', { params: { uid } })
])
if(baseInfoData.ret === 0) { baseInfo = baseInfoData.info } else { baseInfo = {} }
if(payInfoData.ret === 0) { payInfo = payInfoData.info } else { payInfo = {} }
callback(Object.assign({}, baseInfo, payInfo))
} else {
callback({})
}
} catch(err) {
throwError(err)
}
}
getInfo(123456, function(data) {
console.log(data)
})
