promise对象与async函数在异步编程中的用法

在篇文章主要讲js中最常用到的，对于异步编程一种简单的解决办法。绝对干货满满。

官方是这么定义的：

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

我们都知道javascript是单线程的编程语言，通常为了改变程序的执行顺序就会用到异步操作

通常最长用到的异步操作就是ajax请求和setTimeout（）定时函数了。

项目中有时需要通过ajax请求在服务器拿取一组数据，然后以这组数据为参数在服务器再请求另一组数据,或者是直接处理这组数据。但是异步操作通常是需要时间的，我们的代码一步一步写下来，会经常遇到xxx is not defined . 就是说我们操作的变量数据是undefined不存在，但我们往上查发现代码中是有定义接收上一个ajax请求返回的参数的，然后就一脸懵逼。

这里就要说一说js的执行顺序了，

（1）所有同步任务都在主线程上执行，形成一个执行栈。
（2）主线程之外，还存在一个"任务队列"。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件（每一个事件对应一个有运行结果的异步任务），于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

知道了js 的执行顺序，就不难理解了。上面说了这么多就是为了介绍Promise 需要在什么地方使用。以下这段代码就是一个promise构造函数。

//Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 //JavaScript 引擎提供，不用自己部署。

//resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
 //下面是一个promise构造函数
   function getAttribute() {
        return new Promise((resolve, reject) => {
           axios({
               method: 'post',
               url: 'https://xxxxxxxxxxxxx',
               data: {
               appid: "xxx",
               customer_id: "xxx",
               differ: xxx
                }
             }).then(res=>{
                resolve(res)
             })
        })
    },

  getAttribute().then((value) => {
            console.log(value)
          
        })
//promise 构造函数返回一个pormise对象，可以用then方法分别指定resolved状态和rejected状态的回调函数。里面的value就等于上面ajax请求的返回值res

接下来我们在这个Callback里操作value就可以百分百的保证上面的异步操作已经执行完成他的返回值res=value

下面我们来看看async函数的具体用法

借助 Promise，我们可以对setTimeout函数进行改良，下面就是把setTimeout()封装成一个返回Promise的sleep()函数。

     function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      }    
     function getTime() {
        console.log('子谦执行第一段, ' + new Date());
        sleep(5000).then(() => {
          console.log("子谦执行第二段，5秒后执行的操作"+ new Date())
        })
        console.log('子谦执行第三段,'+ new Date())
      }

      getTime();

运行结果：

这里需要提到的一个问题是，这个sleep()在执行的时候它不是同步的。如果想让它同步执行，不妨碍执行之后的代码，我们就需要使用async函数了 。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

下面的写法就是一个同步的执行顺序了，先执行第一段，然后执行sleep函数等待3秒，在执行第二段

     function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      }


     async function getTime() {
        console.log('子谦执行第一段, ' + new Date());
       await sleep(5000).then(() => {
          console.log("子谦执行第二段，5秒后执行的操作"+ new Date())
        })
        console.log('子谦执行第三段', + new Date())
      }

      getTime();

运行结果如下：

内容虽少，码字不易，尊重原创，从我做起，觉得看了这篇有收获的点个赞关注一波，蟹蟹~

未完待续... （纯属个人理解欢迎评论纠正）

promise对象与async函数 在异步编程中的用法

官方是这么定义的：

猜你喜欢

promise对象与async函数在异步编程中的用法