【JavaScript】async & await 解决了那些问题

一、async 和 await

• promise 使用 .then 链式调用，但也是基于回调函数
• async/await 更加优雅的异步编程的写法
  • 它是同步语法，也就是用同步的写法写异步的代码
  • 它是消灭异步回调的终极武器

1. Promise 是ES6中异步回调的处理方法，主要是ES5地狱回调的问题。
2. asyne await 与 promise 没有关系 是 promise 的一个进阶版本
3. asyne await 是解决 promise 问题

promise 异步加载图片

• 分别使用 .then 和 await 来获取结果
• 区别
  1.await 完全没有回调函数
  2.await 是同步写法，异步操作(用同步的方式解决异步问题)
  3.await 后面不仅仅可以接 promise对象，还可以接 async 函数

//里面函数为AJAX，因此是异步任务
let loadImg = (url)=>{
  const p = new Promise((resolve,reject)=>{
    let newImg = document.createElement("img")
	newImg.src = url
	newImg.onload = function(){
	  resolve(newImg)
	}
	newImg.error = function(){
	  reject(new Error('Could not load Image at url'))
	}
  })
  return p
}

//通过 .then 来获取结果
loadImg(url1)
    .then((img)=>{
	  console.log(img.width,img.height)
	  document.body.appendChild(img)
	  return loadImg(url2)
	})
	.then((img)=>{
	  console.log(img.width,img.height)
	  document.body.appendChild(img)
	})
	.catch((err)=>{
	  console.log(err)
	})
	
//使用 async 和 await 的方法来写，立即执行函数
(async function(){
	// loadImg(url1) 返回 promise 对象
	// await 可以拿到从 resolve 传递过来的 dom 对象
	const img1 = await loadImg(url1)  
	document.body.appendChild(img1)
	
	const img2 = await loadImg(url2)  
	document.body.appendChild(img2)
})()

//await 接 async 函数
async function loadImg1(){
  const img1 = await loadImg(url1)
  return img1
}
(async function(){
	//img1可以拿到 resolve 里面的值
	const img1 = await img1 
	document.body.appendChild(img1)
})()

二、async/await 和 promise的关系

• async/await 是消灭异步回调的终极武器
• 但和Promise并不排斥，两者相辅相成
• 执行 async 函数，返回的是 Promsie 对象
• await 相当于 Promise 的 then ，then指的是成功，不指失败
• try…catch 可捕获异常，代替了 Promise的 catch

1.async

async function fn(){
  return 100
}
console.log(fn())  //返回一个成功态的promise对象，result 是 100
fn().then(
  data=>{
    console.log(data)
  }
) // 100

2.await

await 后面接 Promise
1.await p1相当于是 p1.then，并且只是成功态的then
2.await 和 then 的区别就是：then还需要传回调进去，但 await 可以直接得到值
(async function(){
  const p1 = Promise.resolve(300) //一个成功态的promise对象，且传了result为300
  const res = await p1 // return 值
  console.log(res) // 300
})

3.await 和 .then 的区别

fn().then(
  data=>{
    console.log(data)
  }
)

//await直接通过返回值来接收daita, return data
const res = await fn()  

4.await 接数值

  1.await后面跟的不是promise对象而是数值时，会自动包装成成功态的promise对象
  2.并且传值给 resolve 为400

(async function(){
  const res = await 400 //Promise.resolve（400）
  console.log(res) //400
})()

await 接 async 函数
(async function(){
  const res = await fn() //fn()会返回promise对象，原理一样
  console.log(res) //400
})()

5.await 接 promise 为空

1.什么都打印不出来
2.因为 new Promise 里面没有任何状态改变，而await一直在等待状态改变
3.只有状态改变了，await才会允许执行后面的代码

(async function(){
  const p = new Promise(()=>{})
  const res = await p
  console.log(res)
  console.log("success")
})()

6.await 接 promise 为 error

1.会出现报错
2.await相当于成功态的 .then ,都没有成功，因此不会执行后面的代码
3.因为JS是单线程的
4.解决：使用 try…catch 偷偷解决掉 error，保证代码运行
——捕获到错误就不会影响后面的输出

(async function(){
  const p = Promise.reject("error")
  const res = await p
  console.log(res)
  console.log("success")
})()    //什么都打印不出来



(async function(){
  const p = Promise.reject("error")
  try{
    const res = await p
    console.log(res)
  }catch(error){
    console.log(error)
  }
  console.log("success")
})()    //打印出 error 和 success

三、执行顺序

代码中存在 await，则需要等待该行执行完才执行下面的代码

function timeout(){
  return new Promise(resolve=>{
    setTimeout(()=>{
      console.log(1)
      resolve()//成功态
    })
  })
}

//情况一
async function fn(){
  timeout()
  console.log(2)
}
fn() //打印出 2 一秒后 1

//情况2
async function fn(){
  await timeout()
  console.log(2)
}
fn() //1秒后打印出 1 2

//写法二
function timeout(){
  return new Promise(resolve=>{
    setTimeout(()=>{
      resolve(1)//成功态，传递参数1
    })
  })
}
async function fn(){
  const res = await timeout() //需要一个变量来接收await return的参数
  console.log(res)
  console.log(2)
}
fn() //1秒后打印出 1 2

四、async 和 await 的实质

Promise一般用来解决层层嵌套的回调函数
async/await 是消灭异步回调的终极武器
JS还是单线程，还是得有异步，还是得基于 event loop（轮询机制）
async/await 只是一个语法糖
案例2 ：请求多份数据，但后一份数据的请求必须依赖上一份数据的请求结果

解决：
1.可以使用promise的.then 链式层层调用
2.也可以使用 async/await ，用同步的代码来解决异步问题
        依次获取数据，完全是同步的写法
        await会等待该行代码完全运行，才执行后面的代码

async function getDate(){
  const res1 = await request("./a.json")
  console.log(res1)
  
  const res1 = await request("./b.json")
  console.log(res2)
  
  const res1 = await request("./c.json")
  console.log(res3)
}