fuxi_107
/
promise相关的概念.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">async发请求</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>
      // promise 是一个承诺，承诺在未来的某一个时间点，一定有一个固定的结果，要么成功resolve要么失败reject -- 出现的原因就是为了解决一切异步代码回调地狱的问题

      // axios() 这个函数返回的是一个promise，不是一个值，是一个状态， 对于promise来说
      // 有三种状态 等待中pendding  成功 resolve  失败 reject
      const res = axios({
        url: 'http://ajax-api.itheima.net/api/books',
      });

      // 首先res是一个pendding状态的promsie，就是等待中，如果请求成功走哪个函数？如果请求失败又走那个函数？
      // 提前给这个promise写两个回调函数， 如果未来某一个时间点请求成功了， 就会自动指向 then里面的回调函数
      // 如果这个请求10分钟后 失败了，那么就会自动指向 catch里面绑定的回调函数
      res
        .then((p1) => {
          console.log('请求成功，服务器返回的值：', p1);
        })
        .catch((err) => {
          console.log('请求失败，err里面就是失败的原因：', err);
        });

      console.log(res);

      document.querySelector('.btn').addEventListener('click', async () => {
        // vue里面大部分的代码都是使用 async +await 代替promise，更简便一些
        // async 和 promise的区别就是  async是异步的代码当做同步的代码来写
        console.log(1);
        const res = await axios({
          url: 'http://ajax-api.itheima.net/api/books',
        });
        console.log(2, res);
      });
    </script>
  </body>
</html>