master

分支 (1)

管理

管理

master

vue-learning-notes
/
async函数用法.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>async/await</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

  <script type="text/javascript">
    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象

      配合axios 可以直接拿到值
        async 声明在 方法上，在调用接口的时候前面加上 await
        例子：
          async function queryData() {
            let ret = await axios.get(url);
            return ret.data;
          }
          queryData().then(data => {
            console.log(data)
          })

    */

    /* 用法 */
    async function queryData() {
      let ret = await axios.get('http://localhost:3000/async1');
      return ret.data;  //把数据返回出去，让queryData()调用的时候接收
    }

    queryData()
      .then(data => {
        console.log('我是async1的数据----' + data)
      })
      .catch(err => {
        console.error(err)
      })


    /* 多个异步任务 */
    async function queryData1() {
      var info = await axios.get('http://localhost:3000/async1');  // 获取到 async1 的值
      var ret = await axios.get('http://localhost:3000/async2?info=' + info.data);  // 获取到 async2 + async1参数 的值
      return ret.data;  //返回async2 的值
    }

    queryData1().then(data => {
      console.log('我是async2的数据----' + data)
    })


  </script>
</body>
</html>