async和await

2018-08-03  本文已影响16人  马建阳

用的promise比较多,但是感觉每次.then很麻烦,有没有更好的异步处理方法呢?有的,es8出了async和await。
我们来实现一个功能来看一下promise和async,await和之间的区别。
功能:我们需要异步获取三个数据,获取了前面的数据才能去获取后面的数据,最后需要打印出它们的和。

用promise实现

function ajax(num){
    return new Promise(function(resolve,reject){
        setTimeout(()=>{
            resolve(num)
        },1000)
    })
}
let result=0
ajax(1).then(data => {
    result += data
    return ajax(2)
}).then(data => {
    result += data
    return ajax(3)
}).then(data => {
    result += data
    console.log(result)
}).catch(err => {
    console.log(err)
})

有没有感觉一直.then有点傻,我们来看看async和await如何实现

用async和await实现

function ajax(num){
    return new Promise(function(resolve,reject){
        setTimeout(()=>{
            resolve(num)
        },1000)
    })
}
async function test(){
    try {
        let a = await ajax(1)
        let b = await ajax(2)
        let c = await ajax(3)
        let result = a+b+c
        console.log(result) 
    }catch(err){
        console.log(err)
    }
    
}
console.log(test())

有没有一种真正的用同步在写异步代码的感觉,等待一个异步代码执行完毕后再执行之后的代码。
当然test()后面也可以接.then,.catch来进行处理数据

test().then(()=>{})
      .catch(()=>{})
上一篇下一篇

猜你喜欢

热点阅读