草庐IT

async和await

sweetBoy_9126 2023-09-16 原文
  1. await后面接一个会return new promise的函数并执行它
  2. await只能放在async函数里
  • 使用async和await获取成功的结果
function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test()

上面这段代码async中使await 摇色子()先执行,等到三秒后执行完再把得到的结果赋值给左边的n,也就是说test函数需要三秒钟才执行完成,所以test函数是异步的,因此前面必须写async

  • 获取失败的结果
function 摇色子(猜测){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
            if(猜测 === '大'){
                resolve(sino)
            }else{
                reject(sino)
            }
        }else{
            if(猜测 === '大'){
                reject(sino)
            }else{
                resolve(sino)
            }
        }
        setTimeout(()=>{
            resolve(sino)
        },300)
    })
}
async function test(){
    try{
        //把await及获取它的值的操作放在try里
        let n =await 摇色子('大')
        console.log('赢了' + n)
    }catch(error){
      //失败的操作放在catch里
        console.log('输了' + error)
    }
}
test()

把await和成功后的操作放到try里,失败的放在catch

  • 为什么要用await
    为了使我们的异步代码,更像同步的代码

  • 有多个promise,怎么拿到所有的promise都结束后的结果
    比如有两个色子,我想得到这两个色子的点数

  1. 使用promise
function 摇色子(猜测){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        if(sino > 3){
            if(猜测 === '大'){
                resolve(sino)
            }else{
                console.log('error')
                reject(sino)
            }
        }else{
            if(猜测 === '大'){
                console.log('error')
                reject(sino)
            }else{
                resolve(sino)
            }
        }
        setTimeout(()=>{
            resolve(sino)
        },300)
    })
}
Promise.all([摇色子('大'),摇色子('大')]).then((x)=>{console.log(x)},(y)=>{console.log(y)})

promise.all里面跟一个数组,数组的每一项是一个返回promise的函数调用,then的第一个参数是所有的promise都成功后调用,拿到所有promise的结果是一个数组;第二个参数拿到的是第一个失败的值

  1. 使用await
    await是直接获取多个promise的结果的,因为Promise.all()返回的也是一个promise所以如果要使用await拿到多个promise的值,可以直接await Promise.all()
async function test(){
    try{
        let n = await Promise.all([摇色子('大'),摇色子('大')])
        console.log(n)
    }catch(error){
        console.log(error)
    }
}
test()
  • async函数会返回一个promise,并且Promise对象的状态值是fullfiled(成功的)
  1. 如果你没有在async函数中写return,那么这个 async 函数返回的就是一个值为 undefined 的 fulfiled 状态的 Promise
  1. 如果你写了return,那么return的值就会作为你 fulfiled 状态的 Promise 的值
  1. 如果 async 函数里 return 的是一个 Promise 那么返回的就是这个 Promise 执行成功后的结果



    如果上面使用 await 获取结果那么会等到Promise 整个链路都执行完再获取结果也就是你不管.then 多少层级都会等他全执行完

拿到的结果肯定是最后一层的

await 等的是一个 fulfiled 状态的 Promise

await 等到之后,做了一件什么事情?
那么右侧表达式的结果,就是await要等的东西。
等到之后,对于await来说,分2个情况

  • 不是promise对象
  • 是promise对象

如果不是 promise , await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完,再回到async内部,把这个非promise的东西,作为 await表达式的结果。
如果它等到的是一个 promise 对象,await 也会暂停async后面的代码,先执行async外面的同步代码,等着 Promise 对象 fulfilled,然后把 resolve 的参数作为 await 表达式的运算结果。

  • 如果asycn里的代码都是同步的,那么这个函数被调用就会同步执行
async function fn(){
  console.log('a')
}
fn()
console.log('b')
//a
//b
  • 如果在await后面接的这个promsie都是同步的,后面的promise会同步执行,但是拿到这个值还是得等待(特别注意:如果promise没有一个成功的值传入,对await来说就算是失败了,下面的代码就不会执行),所以不管await后面的代码是同步还是异步,await总是需要时间,从右向左执行,先执行右侧的代码,执行完后,发现有await关键字,于是让出线程,阻塞代码
function fn(){
    return new Promise(resolve=>{
        console.log(1)
    })
}
async function f1(){
    await fn()
    console.log(2)
}
f1()
console.log(3)
//1
//3

这个代码因为fn是属于同步的,所以先打印出1,然后是3,但是因为没有resolve结果,所以await拿不到值,因此不会打印2

function fn(){
    return new Promise(resolve=>{
        console.log(1)
        resolve()
    })
}
async function f1(){
    await fn()
    console.log(2)
}
f1()
console.log(3)
//1
//3
//2

这个代码与前面相比多了个resolve说明promise成功了,所以await能拿到结果,因此就是1 3 2

有关async和await的更多相关文章

  1. ruby - Rack 并发 - rack.multithread、async.callback 或两者兼而有之? - 2

    我试图完全理解Rack中并发请求处理的选项。我已经使用async_sinatra构建了一个长轮询应用程序,现在正在使用throw:async和/或Thin的--threaded标志试验裸机Rack。我对这个主题很满意,但有些事情我就是无法理解。(不,我没有将并发误认为是并行,是的,我确实理解GIL强加的限制)。Q1。我的测试表明thin--threaded(即rack.multithread=true)在单独的线程中同时运行请求(我假设使用EM),这意味着长时间运行的请求A将不阻止请求B(IO放在一边)。这意味着我的应用程序不需要任何特殊编码(例如回调)来实现并发(再次忽略阻塞数据库调

  2. javascript - 如何使用来自 async.js 的 Promise 进行编码? - 2

    背景我通常基于async.js编写node.js脚本来控制工作流程。有时我发现基于async.js,代码似乎仍然是一个“hell”。使用多个嵌套,代码不可读且难以维护。我在这里进行了一些搜索,发现了一些有用的资源——但其中大部分都是一般概念。所以我要问一个问题。如有任何反馈,我们将不胜感激。我的常用代码varrequest=require('request');varasync=require('async');vararray=[1,2,3,4,5,6];varurl='http://www.google.com';async.mapLimit(array,3,function(nu

  3. javascript - Angular:使用 MockBackend 测试 HTTP,真的需要 async() 吗? - 2

    我正在使用MockBackend来测试依赖于@angular/http的代码。网络上的所有示例都使用异步测试设置,如下所示:thoughtram:TestingServiceswithHttpinAngulardescribe('getVideos()',()=>{it('shouldreturnanObservable>',async(inject([VideoService,MockBackend],(videoService,mockBackend)=>{videoService.getVideos().subscribe((videos)=>{expect(videos.len

  4. javascript - 如何导出由 async/await 方法返回的对象 - 2

    由于Async总是返回promise,我们必须解析它以获取值。我需要导出它的值(返回的对象),以便我们可以在另一个模块中使用它。exportconstgetClient=async()=>{returnawaitHttpService.getValueFromSettings('durl').then((response)=>{if(isValidResponse(response)){endpoint=response.data;exportconstclient=createClient(response.data);//Thisiswheregettingerrorthatwec

  5. javascript - 如何处理 async/await fetch API 中的错误 404 - 2

    在没有提供数据的情况下是否有机会捕获错误?我收到Error404但不能例如console.log它...classAppextendsReact.Component{getWeather=async(e)=>{e.preventDefault();constcity=e.target.elements.city.value;constcountry=e.target.elements.country.value;constapi_call=awaitfetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${cou

  6. javascript - async.auto 中的任务结果 - 2

    我对async.auto中从一项任务到另一项任务的结果逻辑感到困惑。.例如,在下面的代码逻辑中,我在task1中向模型添加了一些数据,它最初是initialtask的输出,在finalTask​​中添加了数据到task1中的模型也反射(reflect)在results.initialTask​​1中。task2中类似添加的数据反射(reflect)在finalTask​​中的results.initialTask​​1中。总结所有results.initialTask​​1,results.task1[0],results.task2[0]、results.task3[0]在final

  7. javascript - 为什么 JavaScript 函数需要关键字 "async"? "await"关键字还不够吗? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭6年前。Improvethisquestion例如,为什么下面的函数需要“异步”?使用await是否不够具体,编译器可以毫无歧义地解析代码?//Whydoweneedasynchere?asyncfunctionfoo(){varuser=awaitgetUser(user_id);console.log(user);}是为了向后兼容的原因吗?(我想不出在标准JavaScript中使用await键盘的任何代码...)?主要是为了清晰起

  8. javascript - 重组 "withReducer": justification of async reducer function call - 2

    我正在使用withReducerHOC并注意到这种行为:例如,在点击处理程序上调用它:importReactfrom'react'import{withReducer}from'recompose'import{compose}from'ramda'exportdefaultcompose(withReducer('state','dispatch',(state,{value})=>{console.log(value)return{...state,value}},{value:'zero'}))((props)=>{const{dispatch,state}=props,onCl

  9. javascript - `await`什么时候同时解析? - 2

    asyncfunction的MDN文档目前给出了以下两种使用await的组合示例。为了强调,我对它重新排序了一点:functionresolveAfter2Seconds(x){returnnewPromise(resolve=>{setTimeout(()=>{resolve(x);},2000);});}asyncfunctionadd1(x){consta=awaitresolveAfter2Seconds(20);constb=awaitresolveAfter2Seconds(30);returnx+a+b;}asyncfunctionadd2(x){constp_a=res

  10. javascript - Node : Testing with sinon and async/await - 2

    使用sinon和async/await运行此测试时遇到问题。这是我正在做的一个例子://infilefuncsasyncfunctionfuncA(id){leturl=getRoute53()+idreturnawaitfuncB(url);}asyncfunctionfuncB(url){//emptyfunction}和测试:letfuncs=require('./funcs');...//describeletstubRoute53=null;letstubFuncB=null;letroute53='https://sample-route53.com/'letid='123

随机推荐