promise封装ajax

最新推荐文章于 2025-06-09 19:49:50 发布

原创最新推荐文章于 2025-06-09 19:49:50 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解Promise对象的创建与使用，包括如何通过new Promise()构造函数根据业务需求判断执行成功或失败，以及如何使用then()和catch()方法处理异步操作的成功与失败情况。文章还提供了基于XMLHttpRequest实现的ajaxPromise示例，展示了Promise在实际场景中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于promise使用时的几点：

使用方法：先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败，成功调用resovle(),失败则调用reject()。

Promise对象的then(onFulfilled，onRejected)有两个参数，成功执行onFulfilled，失败执行onRejectd

p.then(function(value) {
   // fulfillment成功
  }, function(reason) {
  // rejection失败
});

//不过通常会使用catch()来捕获失败，上段代码通常写为：
p.then(function(value) {
    // fulfillment成功
}).catch(function(reason) {
    //rejection失败
})

Promise对象的then()会返回一个新的Promise对象

const ajaxPromise =  param => {
  return new Promise((resovle, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open(param.type || "get", param.url, true);
    xhr.send(param.data || null);

    xhr.onreadystatechange = () => {
     var DONE = 4; // readyState 4 代表已向服务器发送请求
     var OK = 200; // status 200 代表服务器返回成功
     if(xhr.readyState === DONE){
      if(xhr.status === OK){
        resovle(JSON.parse(xhr.responseText));
      } else{
        reject(JSON.parse(xhr.responseText));
      }
     }
    }
  })
}