Promise中的resolve、reject需要加return吗?

3,525 阅读1分钟

结论:加。

    const btn = document.querySelector('.btn');
    const text = document.querySelector('.text');

    // 请求数据的接口1
    function getData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('getData1')
          console.log('--------------------end--------------------------')
        }, 400)
      })
    }

    // 请求数据的接口2
    function getData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('getData2')
          console.log('--------------------end--------------------------')
        }, 401)
      })
    }

    btn.addEventListener('click', async () => {
      // 如果用户还没请求完成 则span会显示加载中
      text.innerHTML = '加载中.....'

      try {
        const res1 = await getData1();
        const res2 = await getData2();
        Promise.race([res1, res2])
          // 如果向后端请求的数据 等全部执行完毕 取最快的那一个
          // 如果最快的那个报错了 那就GG了
          .then(res => {
            text.innerHTML = res
          })
      } catch (err) {
        // 如果reject被执行 会到 catch里面来 .. 可以执行相应的代码
        text.innerHTML = `接口请求失败,数据无法渲染`;
      }
    })

1.gif 我们从上图可以看到,如果不加return,resolve、reject后面的代码还会执行,一般而言我们不需要后面的代码在执行了,直接加上return即可。

    const btn = document.querySelector('.btn');
    const text = document.querySelector('.text');

    // 请求数据的接口1
    function getData1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          return resolve('getData1')
          console.log('--------------------end--------------------------')
        }, 400)
      })
    }

    // 请求数据的接口2
    function getData2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          return resolve('getData2')
          console.log('--------------------end--------------------------')
        }, 401)
      })
    }

    btn.addEventListener('click', async () => {
      // 如果用户还没请求完成 则span会显示加载中
      text.innerHTML = '加载中.....'

      try {
        const res1 = await getData1();
        const res2 = await getData2();
        Promise.race([res1, res2])
          // 如果向后端请求的数据 等全部执行完毕 取最快的那一个
          // 如果最快的那个报错了 那就GG了
          .then(res => {
            text.innerHTML = res
          })
      } catch (err) {
        // 如果reject被执行 会到 catch里面来 .. 可以执行相应的代码
        text.innerHTML = `接口请求失败,数据无法渲染`;
      }
    })

1.gif 加上return之后,reject、resolve后面的代码不会执行了。