1.什么是Promise？

Promise是一个构造函数,它有三种状态,peading,fulfilled,resolved分别对应等待,成功,失败这三种状态。

2.在Promise原型链上挂载的方法

代码:

  let a = new Promise((resolve, reject) => {});
  console.log(a);

图示:

（1）等待的状态

（2）方法

(3)状态的总结

什么都不干是peading状态.

(1)成功的状态

javascript 复制代码

 let a = new Promise((resolve, reject) => {
      resolve(2)
    });
    console.log(a);

(2)用then方法获取成功的值

javascript 复制代码

 let a = new Promise((resolve, reject) => {
      resolve(2);
    }).then((res) => {
      console.log(res, "成功的值");
    });

(3)图示

(3)失败的状态

javascript 复制代码

let a = new Promise((resolve, reject) => {
      reject(3);
    })
      .then((res) => {
        console.log(res, "成功的值");
      })
      .catch((reject) => {
        console.log(reject, "失败的值");
      });

通过.catch能够获取失败的值

(4)finallly

备注：无论成功和失败都会经过

javascript 复制代码

 let a = new Promise((resolve, reject) => {
      reject(3);
    })
      .then((res) => {
        console.log(res, "成功的值");
      })
      .catch((reject) => {
        console.log(reject, "失败的值");
      })
      .finally(() => {
        console.log("11");
      });

3.回调地狱

(1)在没有Promise之前,异步的任务处理方式:

javascript 复制代码

 setTimeout(() => {
      console.log("吃饭");
      setTimeout(() => {
        console.log("睡觉");
        setTimeout(() => {
          console.log("打豆豆");
        }, 3000);
      }, 4000);
    }, 5000);

(2)代码2

<body>
    <button onclick="getData()">获取数据</button>
    <script>
      function getData() {
     
        // 1、创建XMLHttpRequest实例对象
        var xhr = new XMLHttpRequest()
        // 2、打开一个连接
        xhr.open('get','https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test')
        // 3、设置请求头的格式(这里不需要)
        // requestHeader()
        // 4、发送请求
        xhr.send()
        // 5、接受响应数据
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            // 转换为JSON对象
            console.log(JSON.parse(xhr.responseText));
            var res = JSON.parse(xhr.responseText)
            xhr.open('get',`https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack/${res.a}`)
            xhr.send()
            xhr.onreadystatechange = function(){
                var res1 = JSON.parse(xhr.responseText)
                console.log(res1,'res1');
            }
            // 创建DOM节点
            var div = document.createElement('div')
            //数据赋值
            div.innerHTML = res.data.content
                      // 将节点添加到DOM结构中
            document.body.appendChild(div)
          }
        }
      }

     
     

    </script>
  </body>

获取第一个接口的参数之后,立马将获取的参数，传入第二个接口,可以看出代码非常乱的。

4.使用Promise链式调用

<template>
  <div class="">
    <button @click="fn">点击</button>
  </div>
</template>

<script>
import axios from "axios"; //安装完之后，导入axios
export default {
  name: "",
  data() {
    return {};
  },
  methods: {
    fn() {
      axios
        .get(
          "https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test"
        )
        .then((res) => {
          return axios.get(
            `https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack/${res.data.a}`
          );
        })
        .then((res1) => {
          console.log(res1);
        });
    },
  },
  components: {},
  // 异步函数返回值为Promise的函数
};
</script>

<style scoped lang="less"></style>

可以看出已经获取到了数据。

5.通过async和await来调用

<template>
  <div class="">
    <button @click="fn">点击</button>
  </div>
</template>

<script>
import axios from "axios"; //安装完之后，导入axios
export default {
  name: "",
  data() {
    return {};
  },
  methods: {
    async fn() {
      const a1 = await axios.get(
        "https://www.fastmock.site/mock/010910d86b5019f8016429f50c680e58/api/test"
      );
      console.log(a1);

      const a2 = await axios.get(
        `https://www.fastmock.site/mock/b96091894e7136caded7b25b8d0cdb4e/tack/${a1.data.a}`
      );
      console.log(a2.data.name);
    },
  },
  components: {},
  // 异步函数返回值为Promise的函数
};
</script>

<style scoped lang="less"></style>

这是Es7推出的新语法，这样看起来是不是又更加的简洁明了。

6.用async标记的函数

代码:

javascript 复制代码

async function fn(){
  return 2
}
console.log(fn());

返回的结果:

7.await阻塞问题

1.转换的例子

2.表现

用同步写代码的方式获取异步的结果,所谓的阻塞只不过是表现的形式不同。

3.转换的例子

javascript 复制代码

  async function m() {
      console.log(0);
      const n = await 1;
      // Promise.resolve(1)
      console.log(n); //
    }
    m();
    console.log(2);

    // async function m() {
    //   return Promise.resolve(1).then((n) => {
    //     console.log(n);
    //   });
    // }
    // 给n复制和打印n是在异步队列,打印玩0任务直接结束

思路:首先打印0 然后等待n和打印n的代码加入为任务队列中，转换之后的代码:

javascript 复制代码

  return Promise.resolve(1).then((n) => {
    //     console.log(n);
    //   });

此时这个函数已经结束。.

8.async await的笔试题

javascript 复制代码

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(function () {
  console.log("setTimeout");
}, 0);

async1();

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

分析思路:

1.同步执行 console.log("script start");

2.执行 async1(); console.log("async1 start"); 等待async2()函数返回Promise的状态,并将后面的代码加入微任务的队列微1： console.log("async1 end"); 执行async2()， console.log("async2"); 如果什么都没返回默认返回 // return Promise.resolve(undefined),将定时器的代码加入宏任务队列， console.log("setTimeout");在执行 console.log("promise1"); 后面的代码加入微任务队列2 console.log("promise2");然后在执行同步 console.log("script end"); 执行微1,微2,宏任务即可。