then链式调用

 <button>按钮</button>
    <script>
      // JS代码
      // 同步 代码依次执行，上一个任务完成后，下一个任务才执行
      // 异步 遇到耗时任务不必等待其完成。继续执行后面的任务，如定时器、事件回调、ajax请求（axios)
      // 先执行同步代码，后执行异步代码
      // for (let i = 0; i < 100000; i++) {
      //   console.log(i)
      // }
      // console.log('end')

      // document.querySelector('button').addEventListener('click', function () {
      //   console.log('被点击')
      // })
      // setTimeout(() => {
      //   console.log('ok')
      // }, 2000)
      // console.log('end')

      //  异步的实现 通过回调函数来执行的
      // 异步容易造成回调地狱
      // 需求 先发 第一次请求，等这次请求回来再发另一次请求 容易造成回调地狱
      // 为了优化异步流程->Promise
      // 回调函数->Promise->generator->async await

      // Promise基本语法
      // Promise是一个内置构造函数,接受一个函数(executor)作为参数
      // 该参数函数立即调用，该执行函数可以放同步或异步任务，
      // 参数函数接受两个形参resolve,reject,resolve,reject是函数
      // resolve()调用表示成功  reject()调用表示失败

      // promise三个状态 默认状态(等待态)、成功态、失败态
      const promise = new Promise((resolve, reject) => {
        //  任务
        // console.log(123)
        setTimeout(() => {
          console.log('执行')
          resolve('data数据')
          // 成功了就不能失败
          //  reject('失败')
        }, 1000)
      })

      // promise实例身上有个then方法, then方法有两个参数
      // 第一个参数 成功时候的回调
      // 第二个参数 失败时候的回调
      promise
        .then(
          (data) => {
            console.log(data)
            // return 基本数据 会走下一个then成功回调
            // 出错了 走下一个then失败回调
            // 返回一个promise实例，它成功走then的成功回调，它失败走then的失败回调
            // return 'hello'
            //  throw 123
            return new Promise((resolve, reject) => {
              resolve('ok')
            })
          },
          (reason) => {
            console.log(reason)
          }
        )
        .then(
          (data) => {
            console.log(data)
          },
          (r) => {
            console.log(r)
          }
        )
      console.log(456)