当前位置：首页 > article >正文

JS一个then方法异步的问题

article 2024/11/23 7:55:21

在这里插入图片描述

问题描述
开发的时候遇到一个场景，调用一个接口后在.then中再调用另外一个接口后，再结束.then方法后去继续执行后面的逻辑，但是并没有这样同步执行

问题根因

Promise.resolve('origin')
  .then(
    (string) =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          string += 'aaa'
          resolve(string)
        }, 1)
      })
  )

  .then((string) => {
    sleep().then(() => {
      return (string += 'bbb')
    })
  })
  .then((string) => {
    console.log(`result:${string}`)
  })

function sleep() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 500)
  })
}

在这里插入图片描述

解决方法

Promise.resolve('origin')
  .then(
    (string) =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          string += 'aaa'
          resolve(string)
        }, 1)
      })
  )

  .then((string) => {
    // 可以去掉 return 查看区别
    return sleep().then(() => {
      return (string += 'bbb')
    })
  })
  .then((string) => {
    console.log(`result:${string}`)
  })

function sleep() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 500)
  })
}