Promise、async/await实现异步操作

并发与并行

• 并发：对于单核处理器，同一时间内多个程序同时进行，这些程序在微观上是交替进行的
• 并行：对于多核处理器，同一时刻内有多个程序同时进行

同步与异步

• 同步 Synchronous ：前一个任务执行完毕后，后一个任务才能进行。
• 异步 Asynchronous：多个任务可同时进行——多线程编程

JavaScript没有多线程概念，而是通过函数回调实现单线程“并发”。比如通过fetch获取网络资源，获取过程先会被跳过，去执行其他任务，等资源获取完毕后再执行回调函数。即在同一个线程中，要等待的任务先让不需等待的任务执行，直到等待完获取到资源后，再插队进来。

setTimeout()实现异步

setTimeout(()=>{
	console.log('三秒后执行')
},3000)

//面临“回调地域” CallBack Hell 问题
setTimeout(()=>{
	console.log('三秒后执行')
	setTimeout(()=>{
		console.log('三秒后执行')
		setTimeout(()=>{
			console.log('三秒后执行')
		},3000)
	},3000)
},3000)

Promise实现异步

能够通过链式结构将多个异步操作串联起来，而不需要多层嵌套

• 方法：then、catch、all、finally

const goal=70
const result = new Promise((resolve,reject)=>{
 if (goal>=60){
	 resolve('良好')
 }else{
	 reject('不及格')
 }
})

  
result.then(e=>{
	console.log('你通过了考试！')
}).catch(e=>{
	console.log('非常遗憾，你未能通过考试！')
}).finally(()=>{
	console.log('感谢你参与本次测试！')
})

async/await与promise

• async表明了某函数的返回值是异步对象（如promise对象）

  async function f(){/*返回异步对象promise*/}
  
  //such as
  async function f(){
  	return new Promise((resolve,reject)=>{/*...*/})
  }
  

• await常跟着一个promise对象，等待异步执行

  async function getResult(){
  	const response=await fetch('...') //fetch返回的是异步对象
  	text=response.json()
  	console.log(text)
  }
  

多个异步操作

• forEach会立刻执行，下面写法会直接跳到console.log，所以forEach无法实现异步。

  async function f(){
  	[1,2,3].forEach(async i =>{
  		await someAsyncOperations()
  	})
  	console.log('完成啦')
  }
  

• 可以用for循环实现异步

  async function f(){
  	for(let i of [1,2,3]){
  		await someAsyncOperations()
  	}
  	console.log('完成啦')
  }
  

• 升级版，for await异步并发。

  async function f(){
  	const promises=[
  		someAsyncOperations(),
  		someAsyncOperations(),
  		someAsyncOperations()
  	]
  
  	for await (let result of promises){
  		//
  	}
  	console.log('完成啦')
  }
  

Await和Async

• async函数内如果碰到await，会等待异步完成后再执行下一个函数

  async function getStockPriceByName(name) { 
  	let symbol = await getStockSymbol(name);
  	let stockPrice = await getStockPrice(symbol); 
  	return stockPrice; //返回promise对象
  }
  getStockPriceByName('goog').then(()=>{/*...*/})
  

• async函数的return会成为then回调的参数

  async function f() { return 'hello world'} 
  f().then(v => console.log(v))
  

• await后面的结果如果是reject，会终止程序。如果想继续，用try catch

  async function f() { 
  	try { 
  		await Promise.reject('出错了'); 
  	} catch(e) {
  		console.log('出错了')
  	} 
  	return await Promise.resolve('hello world'); 
  } 
  
  f() .then(v => console.log(v))