javascript怎么解决异步问题?异步解决方案分享！

2021-06-10 16:02:00 浏览数 (50)

我们通过学习都是知道JavaScript是一门单线程的语言，我们都知道双线程肯定会比单线程好，所以单线程在执行一些比较消耗时间的操作的时候就需要使用异步执行的操作，不然很容易崩掉。那么今天我们就来说说：“javascript怎么解决异步问题?异步解决方案分享！”这个问题吧！

1、使用回调函数

有学过和使用过jQuery的小伙伴就会知道这个方法，这是个将自己作为变量传递给另一个函数的函数，是在主体函数执行完成之后在执行的。代码如下：

let delayWithCallback = (time, callback) => {
    console.log('handle...')
    setTimeout(() => {
        if (typeof callback === 'function') {
            callback(`success`)
        }
    }, time)
}

代码中可以看到我们在callback方法里面处理回调问题。

2.使用Promise

这个方法是通过本身构造函数在接受一个函数作为参数，从而分别来表示操作执行成功后的回调函数和异步操作执行失败后的回调函数

，Promise的参数分别是resolve和reject；代码如下：

let index = 1;
let delayWithPromise = (time) => {
    return new Promise((resolve, reject) => {
        console.log(`task${index} handle...`)
        index++
        setTimeout(() => {
            resolve('success')
        }, time)
    })
}

我们还可以在这个方法之上使用then方法进行回调。代码如下：

let func2 = () => {
    console.log('start')
    delayWithPromise(1000).then(result => {
        console.log(result)
        console.log('end')
    })
} 
func2()

通过代码我们可以知道then这个方式是在Promise.prototype.then()中接收两个参数来实现的。

3.使用async或者await的解决异步问题

由于这两个方法是ES7中的新特性所以关于他们的用法有这些特点：

(1).我们可以在function前面加async关键字就可以表示这是个async函数；而且async的返回值是一个Promise对象，所以我们还可以用then方法添加回调函数。

(2).当我们在使用await的时候后面跟着的应该是个promise对象，如果不是的话就会被转成个含有resolve的Promise对象，而且await是表示在等待promise返回结果了之后再继续执行的。

下面是一个相关的代码：

let func6 = async () => {
    console.log('start')
    let result = await delayWithPromise(1000);
    console.log(result)
    console.log('end')
}
func6()

(3).使用async或者await一个个执行代码如下：

let func7 = async () => {
    console.log('start')
    let result1 = await delayWithPromise(500)
    let result2 = await delayWithPromise(500)
    console.dir(result1, result2)
    console.log('end')
}
func7()

当我们使用这个方法的时候这个功能出来是会依照程序一步步来的。还设有500ms的时间间隔。

(4).使用async或者await同时执行方法

let func8 = async () => {
    console.log('start')
    let [result1, result2] = await Promise.all([
        delayWithPromise(500),
        delayWithPromise(500)
    ])
    console.dir(result1, result2)
}
func8()
总结：

以上就是今天有关于“javascript怎么解决异步问题?异步解决方案分享！”这个问题的方法和使用。更多有关的学习知识我们都可以在W3cschool中进行搜素学习和了解。


JavaScript 前端

0 人点赞