JavaScript的异步和同步,普通回调,promises,generator 或 async/await比较

96
王乐城愚人云端
2019.03.06 17:57* 字数 840

普通回调,promises,generator 或 async-wait

现在使用4种方式,依次获取店铺 shops,再获取该店铺的水果 fruits

1. 普通回调

const ajax = require('yu.ajax')

function getShop() {
    ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/shops',
        onSuccess: function (result) {
            console.log(result)
            getFruit()
        }
    })
}

function getFruit() {
    ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/fruits',
        onSuccess: function (result) {
            console.log(result)
        }
    })
}

getShop()

2. Promise

const ajax = require('yu.ajax')

new Promise(function (resolve, reject) {
    ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/shops',
        onSuccess: function (result) {
            resolve(result);
        },
        onFailure: function (error) {
            reject(error)
        },
    })
}).then(data=>{
    console.log(data)
    ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/fruits',
        onSuccess: function (result) {
            console.log(result);
        },
        onFailure: function (error) {
            console.log(error)
        },
    })
}).catch(error=>{
    console.log('error:', error)
})

3. Generator

const ajax = require('yu.ajax')

function getShop() {
    ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/shops',
        onSuccess: function (result) {
            task.next(result);
        }
    })
}

function getFruit() {
        ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/fruits',
        onSuccess: function (result) {
            task.next(result);
        }
    })
}

function* doTask() {
    const shops = yield getShop()
    const fruit = yield getFruit()
    console.log(shops)
    console.log(fruit)
}

const task = doTask()
task.next()

4. async await

function getShop() {
    return new Promise(resolve=>{
        ajax({
            method: 'GET',
            url: 'http://mock.yurencloud.com/shops',
            onSuccess: function (result) {
                resolve(result)
            }
        })
    })

}

function getFruit() {
    return new Promise(resolve=>{
        ajax({
            method: 'GET',
            url: 'http://mock.yurencloud.com/fruits',
            onSuccess: function (result) {
                resolve(result)
            }
        })
    })
}

async function doTask() {
    const shops = await getShop()
    const fruit = await getFruit()
    console.log(shops)
    console.log(fruit)
}

doTask()

5. Promise的深入应用

我对他们三者之间的关联理解如上图所示,Promise是基础,Generator和async/await串连多个Promise的同步执行,也就是把Promise的异步特性变为同步,编程更爽。当然Generator的yield也可以跟非Promise类型的对象,对于Generator更可以理解为迭代器。而async/await则是多个Promise同步执行的简单方法。

Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了

  1. 简单使用,执行代码和处理结果分开
new Promise((resolve,reject)=>{
        ajax({
            method: 'GET',
            url: 'http://mock.yurencloud.com/fruits',
            onSuccess: function (result) {
                resolve(result)
            },
            onFailure: function (result) {
               reject(result)  
            },
        })
    }).then(result=>{
        // 处理成功
        console.log(result)
    }).catch(error=>{
        // 处理失败
        console.log(error)
    })
  1. 可以按顺序执行多个异步任务

平常业务中我们发起多个异步ajax请求时,往往不知道哪个请求先返回结果,异步结果不可控。

让异步任务可控,可以按照我们的要求顺序执行

场景:

  • 当任务是异步的,
  • 下一个任务依赖上一个任务的执行结果
  • 全部成功才算成功
  • 只要其中一个任务失败,则全部失败

function task1(input) {
    console.log(input)
    return new Promise((resolve, reject)=>{
        setTimeout(function () {
            resolve(1)
        }, 1000)
    })
}

function task2(input) {
    console.log(input)
    return new Promise((resolve, reject)=>{
        setTimeout(function () {
            resolve(2)
        }, 1000)
    })
}

function task3(input) {
    console.log(input)
    return new Promise((resolve, reject)=>{
        setTimeout(function () {
            resolve(3)
        }, 1000)
    })
}

new Promise((resolve, reject)=>{
    resolve(0)
}).then(task1)
    .then(task2)
    .then(task3)
    .then(result=>{
        console.log(result)
    })
  1. 可以同时执行多个异步任务
    场景:
  • 当任务是异步的,
  • 任务之间无依赖关系
  • 全部成功才算成功
  • 只要其中一个任务失败,则全部失败
const task1 = new Promise((resolve, reject)=>{
    setTimeout(function () {
        resolve(1)
    }, 1000)
})

const task2 = new Promise((resolve, reject)=>{
    setTimeout(function () {
        resolve(2)
    }, 1000)
})

const task3 = new Promise((resolve, reject)=>{
    setTimeout(function () {
        reject(3)
    }, 1000)
})

Promise.all([task1, task2, task3]).then(result=>{
    console.log(result)
}).catch(error=>{
    console.log(error)
})

  1. 异步任务竞争,以先完成的任务的结果为准

因为以下异步任务中,任务2先完成,所以结果返回是2

const task1 = new Promise((resolve, reject)=>{
    setTimeout(function () {
        resolve(1)
    }, 2000)
})

const task2 = new Promise((resolve, reject)=>{
    setTimeout(function () {
        resolve(2)
    }, 1000)
})

Promise.race([task1, task2]).then(result=>{
    console.log(result)
})

6. Generator 的深入应用

将Promise的深入应用用Generator重写

  1. 简单使用
function getFruits() {
    ajax({
        method: 'GET',
        url: 'http://mock.yurencloud.com/fruits',
        onSuccess: function (result) {
            task.next(result)
        },
    })
}

function* doTask() {
    const fruits = yield getFruits()
    console.log(fruits)
}

const task = doTask()
task.next()
  1. 可以按顺序执行多个异步任务

从代码来看,比Promise简洁多了

function task1() {
    setTimeout(function () {
        task.next(1)
    }, 1000)
}

function task2() {
    setTimeout(function () {
        task.next(2)
    }, 1000)
}

function task3() {
    setTimeout(function () {
        task.next(3)
    }, 1000)
}

function* doTask() {
    console.log(0)
    const one = yield task1()
    console.log(one)
    const two = yield task2()
    console.log(two)
    const three = yield task3()
    console.log(three)
}

const task = doTask()
task.next()
  1. 不可以同时执行多个异步任务

因为next()表示的是下一个任务,那么Generator只是迭代器,不能是并发器,只能按顺序执行

  1. 当然也有没竞争任务
  2. 那Generator的应用场景是什么?

我觉得是简化异步流程,比如我们现在要处理多个表单多个流程多个目标,我先报名,报名成功后,向政府a报备,政府a通过后,我就向政府b请求。如果政府a拒绝,我就向政府c请求。每个表单提交都是一个异步任务,并且还不知道结果如何。如果用promise,则也会比较绕。

function* doTask() {
    console.log(0)
    const one = yield task1()
    console.log(one)
    const two = one === 1 ? yield task2() : yield task3()
    console.log(two)
}

7. async, await 的深入应用

而async/await则是多个Promise同步执行的简单方法, 同时,async/await的功能和效果应该和generator相同。因为babel中有async/await转generator语法的转换器。

将Promise的深入应用用async awit重写

  1. 简单使用
function getShop() {
    return new Promise(resolve=>{
        ajax({
            method: 'GET',
            url: 'http://mock.yurencloud.com/shops',
            onSuccess: function (result) {
                resolve(result)
            }
        })
    })

}

async function doTask() {
    const shops = await getShop()
    console.log(shops)
}

doTask()
  1. 可以按顺序执行多个异步任务

async/await 同时具有promise和generator的写法和优点,又比promise简洁,比generator更容易理解,不会有.next()这样的迭代。

function task1() {
    return new Promise((resolve, reject)=>{
        setTimeout(function () {
            resolve(1)
        }, 1000)
    })
}

function task2() {
    return new Promise((resolve, reject)=>{
        setTimeout(function () {
            resolve(2)
        }, 1000)
    })
}

function task3() {
    return new Promise((resolve, reject)=>{
        setTimeout(function () {
            resolve(3)
        }, 1000)
    })
}

async function doTask() {
    console.log(0)
    const one = await task1()
    console.log(one)
    const two = await task2()
    console.log(two)
    const three = await task3()
    console.log(three)
}

doTask()
  1. async/await处理reject,处理错误

使用try/catch来处理错误,抛出的处理就是reject的结果

async function doTask() {
    try{
        console.log(0)
        const one = await task1()
        console.log(one)
        const two = await task2()
        console.log(two)
        const three = await task3()
        console.log(three)
    }catch (e) {
        console.log(e)
    }
}
日记本
Web note ad 1