async_await详解

以不同的方式使用

两者结合的基本使用

const fetch = require('node-fetch')
async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  const column = await response.json()
  console.log(`NAME:${column.name}`)
  console.log(`INTRO:${column.intro}`)
}
getzhihuColumn('xxx')

每一个async函数都会返回一个promise类型的返回值所以我们以可以使用下面此方法

const fetch = require('node-fetch')
async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
getzhihuColumn('xxx')
  .then(column => {
    console.log(`NAME:${column.name}`)
    console.log(`INTRO:${column.intro}`)
  })

以函数表达式和匿名函数的格式使用

无论是在node环境还是浏览器环境只要是在代码的顶级作用域下使用async都是非法的,所以我们需要把它设置成 ** 匿名表达式 **

const fetch = require('node-fetch')
async getzhihuColumn = async (id)=> {
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
(async ()=> {
	const column = await getzhihuColumn('xxx')
	console.log(`NAME:${column.name}`)
	console.log(`INTRO:${column.intro}`)
)()	

以类上的一个方法的格式使用

const fetch = require('node-fetch')
class APIClient {
	async getCloumn(id){
		const url = 'http://xxxxxxxxxxxx/${id}'
		const response = await fetch(url)
		return awaut response.json()
	}
}
(async ()=> {
	const client = new APIClient()
	const column = await client.getzhihuColumn('xxx')
	console.log(`NAME:${column.name}`)
	console.log(`INTRO:${column.intro}`)
)()	

使用try catch的方式处理请求错误

const fetch = require('node-fetch')
async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
const showColumnInfo = async (id) =>{
	try{
		const column = await client.getzhihuColumn('xxx')
		console.log(`NAME:${column.name}`)
		console.log(`INTRO:${column.intro}`)
	}catch(err){
		console..error(err)
	}
}
showColumnInfo ('xxx')

串行和并行

以串行的方式写

const fetch = require('node-fetch')
async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
const showCloumnInfo = async () => {
	const feweekly = await getzhihuColumn('xxx')
	const feweeklt = await getzhihuColumn('xxx')
	console.log(`NAME:${feweekly.name}`)
	console.log(`INTRO:${feweekly.intro}`)

	console.log(`NAME:${feweeklt.name}`)
	console.log(`INTRO:${feweeklt.intro}`)
}
showCloumnInfo('xxx')

以并行的方式写

通常并行的速度会快很多

const fetch = require('node-fetch')
async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
const showCloumnInfo = async () => {
	const feweeklyPromise = getzhihuColumn('xxx')
	const feweekltPromise = getzhihuColumn('xxx')
	const feweekly = await feweeklyPromise 
	const feweeklt = await feweekltPromise 
	console.log(`NAME:${feweekly.name}`)
	console.log(`INTRO:${feweekly.intro}`)

	console.log(`NAME:${feweeklt.name}`)
	console.log(`INTRO:${feweeklt.intro}`)
}
showCloumnInfo('xxx')

通过Promise.all()实现并行操作

const fetch = require('node-fetch')
async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
const showCloumnInfo = async () => {
	const [feweekly, feweekl] = await Promise.all({
		getzhihuColumn('xxx')
		getzhihuColumn('x0x')
	})
	console.log(`NAME:${feweekly.name}`)
	console.log(`INTRO:${feweekly.intro}`)

	console.log(`NAME:${feweeklt.name}`)
	console.log(`INTRO:${feweeklt.intro}`)
}
showCloumnInfo('xxx')

拓展

await 可以和返回值是Promise或者带有then方法的库结合来使用例如bluebird

const bluebird = require('bluebird')

async function main() {
	console.log('waiting-----')
	await bluebird.delay(2000)
	console.log('done')
}
main()

在for循环中正确的使用await

const fetch = require('node-fetch')
const bluebird = require('bluebird')

async function getzhihuColumn(id){
  const url = `http://xxxxxxxxxxxx/${id}`
  const response = await fetch(url)
  return await response.json()
}
const showCloumnInfo = async () => {
	const names = ['feweeklt','feweekly']
	const promises = names.map(x => getzhihuColumn(x))
	for(const promise of promises){
		const column = await promise
		console.log(`NAME:${column.name}`)
		console.log(`INTRO:${column.intro}`)		
	}
}
showCloumnInfo('xxx')