JS await/async 同步方式写异步代码

272 阅读1分钟

注意:使用for 遍历会阻塞代码,使用forEach不会阻塞代码,根据需求使用适合方式

使用for

async function get(url_arr){
	var results=[]
	for(let i=0;i<url_arr.length;i++){
        console.log(url_arr[i]+' '+new Date().getTime())
    	var result = await  get_one(url_arr[i])
        console.log(result)
        results.push(result)
    }
}
async function get_one(url){
    for(let i=0;i<5;i++){
      console.log('i= '+i)
      try{
          var res = await fetch(url)
          console.log('success ',new Date().getTime())
          return res
      }catch(e){
          console.log('fail + ',new Date().getTime())
          return null
      }
    }
}

//结果
https://www.aidu.com 1602818427479
i= 0
Promise {<pending>}
GET https://www.aidu.com/ net::ERR_CONNECTION_REFUSED
fail +  1602818430575
null
https://juejin.cn 1602818430575
i= 0
success  1602818430748
Response {type: "basic", url: "https://juejin.cn", redirected: false, status: 200, ok: true, …}

使用forEach

async function get(url_arr){
	var results=[]
	url_arr.forEach(async function(url){
        console.log(url+' '+new Date().getTime())
    	var result = await  get_one(url)
        console.log(result)
        results.push(result)
    })
}
async function get_one(url){
    for(let i=0;i<5;i++){
      console.log('i= '+i)
      try{
          var res = await fetch(url)
          console.log('success ',new Date().getTime())
          return res
      }catch(e){
          console.log('fail + ',new Date().getTime())
          return null
      }
    }
}

//结果
get(['https://www.aidu.com','https://juejin.cn'])
https://www.aidu.com 1602818728338
i= 0
https://juejin.cn 1602818728339
i= 0
Promise {<fulfilled>: undefined}
success  1602818728527
Response {type: "basic", url: "https://juejin.cn", redirected: false, status: 200, ok: true, …}
GET https://www.aidu.com/ net::ERR_CONNECTION_TIMED_OUT
fail +  1602818738517
null