Async 和 Await 解决异步问题和Promise的用法（等待上一个方法执行完成后，在执行后面的内容）

原创已于 2024-11-06 20:52:54 修改 · 2.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #es6

于 2021-11-16 17:01:13 首次发布

本文探讨了如何在JavaScript中有效利用Async和Await解决回调地狱问题，以及Promise的基本用法和链式调用。通过实例展示了如何确保数据一致性并理解Promise的不同状态和操作。

Async 和 Await用法

         const assignmentAction = () =>{
               setTimeout(() => {
                 console.log('111111')
                }, 1000);
          }
          const output = ()=>{
            assignmentAction();
            console.log('22222222')
            return 0
          }
          output();

输出结果：
在这里插入图片描述
很明显在执行output方法的时候，assignmentAction()和 console.log(‘22222222’)语句并不是先后执行的，而是一起执行的，换句话说， console.log(‘22222222’)并不会等到assignmentAction方法执行完后在继续执行，所以就会导致我们在调用assignmentAction方法做了数据处理，我们在他的后面去拿assignmentAction执行结果是有可能拿不到的。我们如果想百分百拿到assignmentAction的结果，就需要等待assignmentAction执行完成后在执行后面的逻辑，比如说上面的console.log(‘22222222’)，这个时候就需要用到Async 和 Await

       const assignmentAction = ()=>{
           return new Promise((resolve,reject)=>{
            const loop = setTimeout(() => {
                 console.log('111111')
                 resolve();
                }, 1000);
        });
          }
          const output = async()=>{
            await assignmentAction();
            console.log('22222222')
          }
          output();

输出结果：
在这里插入图片描述

Promise简单使用

我们也可以，使用Promise的then()方法拿到直接执行结果（Promise((resolve,reject)中的resolve和reject ，分别代表两种状态，resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或 rejected（失败））通俗的讲就是执行成功会通过resolve，失败则通过reject来返回，当然then方法也支持链式（then().then().then()）
举个栗子：

           const assignmentAction = ()=>{
            return new Promise((resolve,reject)=>{
              setTimeout(() => {
                  let num = 5;
                    if(num < 6){
                      resolve('成功');
                    }else{
                      reject('失败');
                    }
                 }, 1000);
             });
           }
           const output = ()=>{
              assignmentAction().then(res=>{ // 成功
                  console.log('结果是：--->',res)
              },res=>{ // 失败
                console.log('结果是：--->',res)
            });
           }
           output();

在这里插入图片描述

    const  res = new Promise(function(resolve,reject){
        if(success){
            resolve('返回成功的结果')
        }else{
            reject('返回失败的结果')
        }
    })
    res.then(function (res) {
        // 接收resolve传来的数据）（执行成功后的结果，参考上面的栗子）
        
    },function (err) {
        // （执行失败后的结果）
    })
    res.catch(function (err) {
        // 接收reject传来的数据或者捕捉到then()中的运行报错时，做些什么
    })
    res.finally(function(){
        // 不管什么状态都执行
    })