深入理解Promise对象

关注

原创最新推荐文章于 2026-04-15 19:56:00 发布 333 阅读 AI 写同款· GEO 优化 ›

40、深入理解 Deferred 和 Promise 对象：避免回调地狱本文深入介绍了JavaScript中处理异步编程的Deferred和Promise对象，详细讲解了拒绝Promise、执行回调函数、跟踪进度、使用$.when等核心概念，并通过多个示例代码展示了如何在实际项目中应用这些技术。文章还提供了最佳实践建议，帮助开发者避免回调地狱，提升代码的可维护性和模块化程度。适合希望深入理解异步编程、优化Ajax请求处理和提升用户体验的前端开发者阅读。阅读详情

promise初级用法

const testPath = path.join(__dirname, 'test.txt')

const readFileAsync = new Promise((resolve, reject) => {
  const data = readFile(testPath, 'utf8', (data, err) => {
    if (data) resolve(data)
    else reject(err)
  })
})

readFileAsync.then((data) => {
  console.log(data)
}, (err) => {
  console.log(err)
})

这段代码中readFileAsync.then()会立即执行

包装高阶函数, 让异步函数可以传递参数

const testPath = path.join(__dirname, 'test.txt')

const readFileAsync = (path) => {
  return new Promise((resolve, reject) => {
    readFile(path, 'utf8', (data, err) => {
      if (data) resolve(data)
      else reject(err)
    })
  })
}

readFileAsync(testPath).then((data) => {
  console.log(data)
}, (err) => {
  console.log(err)
})

通过async-await函数使用：

;(async () => {
  try {
    const data = await readFileAsync(testPath)
    console.log(data)
  } catch (err) {
    console.log(err)
  }
})()

setTimeout延迟执行

const sleep = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time)
  })
}

sleep(2000).then(()=>{console.log('过了两秒钟打印');})
// 或者通过这种方法
;(async () => {
  await sleep(2000)
  console.log('run in 2s')
})()