javascript处理异步的三种方法

一、回调函数篇

1、单线程同步执行案例

let girlname = '张三'；

function start () {

    girlname = '黄蓉'；
    console.log(`我是${ girlname }`);

}

function end() {

    console.log(`${girlName}你好，我是郭靖，认识一下吧`);

}

start();
end();

上面案例不存在异步，单线程同步执行，最后输出：

//  我是黄蓉

//  黄蓉你好，我是郭靖，认识一下吧

2、当发生异步时

let girlname = '张三'；

function start () {

   setTimeout(() => {
       girlName = "黄蓉"
       console.log(`我是${ girlname }`);
   }, 0);
}

function end() {

    console.log(`${girlName}你好，我是郭靖，认识一下吧`);

}

start();
end();

输出结果：

//  张三你好，我是郭靖，认识一下吧

//  我是黄蓉

对比两次输出结果，由于start函数中存在异步，所以只有等主线程走完，才能走异步函数；

这时就可以通过回调函数解决这种问题

let girlname = '张三'；

function start (callBack) {

   setTimeout(() => {
       girlName = "黄蓉"
       console.log(`我是${ girlname }`);
       callBack();
   }, 0);
}

function end() {

    console.log(`${girlName}你好，我是郭靖，认识一下吧`);

}

start(end);

输出结果为：

//  我是黄蓉

//  黄蓉你好，我是郭靖，认识一下吧

学习文章：https://segmentfault.com/a/1190000017935821

二.Promise对象篇

1、

resolve ：调用 resolve 代表一切正常；

reject：出现异常时所调用的；

.then() ：可以将参数中的函数添加到当前 Promise 的正常执行序列；

.catch() ：则是设定 Promise 的异常处理序列；

.finally() ：是在 Promise 执行的最后一定会执行的序列。

2、代码示例resolve() 中可以放置一个参数用于向下一个 then 传递一个值，

        then 中的函数也可以返回一个值传递给 then；

new Promise(function (resolve, reject) {

    console.log(1111);
    if(success){
        resolve(2222);
    }else{
        reject('失败的结果')
    }
   

}).then(function (value) {

    console.log(value);
    return 3333;

}).then(function (value) {

    console.log(value);
    throw "An error";

}).catch(function (err) {

    console.log(err);

});

输出结果：

1111
2222
3333
An error

三. async 函数篇

1、格式

async function aa(){
        await '任务1'
        await '任务2'
}

2、async：它被放置在一个函数前面

函数前面的async一词意味着一个简单的事情：这个函数总是返回一个promise，如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值。

代码案例：

async function f() {
    return 1
}
f().then(alert) // 弹出1

async function f() {
    return Promise.resolve(1)
}
f().then(alert) // 弹出1

3、await:只能在async函数内部使用

关键词await可以让JavaScript进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。

async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve('done!'), 1000)
    })
    let result = await promise // 直到promise返回一个resolve值（*）
    alert(result) // 'done!' 
}
f()

函数执行到（await）行会‘暂停’，不再往下执行,当promise处理完成后重新恢复运行， resolve的值成了最终的result，所以上面的代码会在1s后输出'done!

关于async/await总结：

放在一个函数前的async有两个作用：

   使函数总是返回一个promise
    允许在这其中使用await
promise前面的await关键字能够使JavaScript等待，直到promise处理结束。然后：

如果它是一个错误，异常就产生了，就像在那个地方调用了throw error一样。
否则，它会返回一个结果，我们可以将它分配给一个值
 

学习文章：前端异步(async)解决方案(所有方案)_纸飞机博客-CSDN博客_异步