Promise的基本使用方法

最新推荐文章于 2024-07-20 23:55:03 发布

伯格老谭

最新推荐文章于 2024-07-20 23:55:03 发布

阅读量307

点赞数 1

分类专栏：大前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51822714/article/details/109560472

版权

这篇博客详细介绍了Promise的原理和使用，包括Promise的三种状态、API、链式调用、异常处理以及并行执行。通过实例解析了Promise如何解决回调地狱问题，并对比了Promise与Async/Await的异步编程解决方案。

摘要由CSDN通过智能技术生成

Promise的概述

Promise存在三种状态，及承诺开始pending，承诺兑现fulfilled以及承诺失败rejected。
承诺的状态一旦确定就不可在被改变，即当状态为fulfilled时，此时promise的状态就不可再变为rejected，反之同样。
fulfilled与rejected存在onFulfilled和onRejected状态。

什么是promise？

抽象表达：Promise 是JS 中进行异步编程的新的解决方案
具体表达：Promise 是一个构造函数，promise对象用来封装一个异步操作并可以获取其结果

promise诞生的意义是什么，为什么会有promise?

指定回调函数的方式更加灵活
promise之前：必须在启动异步任务前指定
promise：启动异步任务=> 返回promie 对象=> 给promise 对象绑定回调函
数(甚至可以在异步任务结束后指定/多个)
支持链式调用, 可以解决回调地狱问题
什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件
回调地狱的缺点? 不便于阅读/ 不便于异常处理
解决方案? promise 链式调用
终极解决方案? async/await

promise的Api有哪些?

Promise 构造函数: Promise (excutor) {}
Promise.prototype.then 方法: (onResolved, onRejected) => {}
Promise.prototype.catch 方法: (onRejected) => {}
Promise.resolve 方法: (value) => {}
Promise.reject 方法: (reason) => {}
Promise.all 方法: (promises) => {}
Promise.race 方法: (promises) => {}

Promise的基本用法

// Promise 基本示例

const promise = new Promise(function (resolve, reject) {
  // 这里用于“兑现”承诺

  // resolve(100) // 承诺达成

  reject(new Error('promise rejected')) // 承诺失败
})

promise.then(function (value) {
  // 即便没有异步操作，then 方法中传入的回调仍然会被放入队列，等待下一轮执行
  console.log('resolved', value)
}, function (error) {
  console.log('rejected', error)
})

console.log('end')

Promise的使用案例

// Promise 方式的 AJAX

function ajax (url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
    xhr.send()
  })
}

ajax('/api/foo.json').then(function (res) {
  console.log(res)
}, function (error) {
  console.log(error)
})

Promise的常见误区

// Promise 常见误区

function ajax (url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.responseType = 'json'
    xhr.onload = function () {
      if (this.status === 200) {
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
    xhr.send()
  })
}

// 嵌套使用 Promise 是最常见的误区
ajax('/api/urls.json').then(function (urls) {
  ajax(urls.users).then(function (users) {
    ajax(urls.users).th