$.ajax的Promise实现1_$.ajax promise-优快云博客

本文链接：https://blog.youkuaiyun.com/liangpike/article/details/91386438

本文探讨了使用Promise对象优化Ajax调用的方法，通过将回调函数替换为Promise，实现了代码解耦和更优雅的错误处理，展示了如何利用Promise解决异步操作中的顺序执行问题。

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

我们知道在ajax中想要获取返回值，需要在success中添加回调方法，大大增加了前端代码的耦合度，同时调用起来显得不够优雅，下面咱们看看Promise类如何优雅的解决这个问题的

$.ajax 调用的模式如下：

$.ajax({

   type: 'GET',

   url: 'your-request-url',

   headers: {

       "Accept": "application/json;odata=verbose",

       "Content-Type": "application/json;odata=verbose",

   },

   dataType: 'json',

   success: function(data) {

      //do something with data

   },

   error: function(data) {

     console.log(data);

   }

})

可以看到do something with data的逻辑耦合在了success的回调方法中，下面看看JavaScript中的Promise对象如何解决这个问题

func() {

  return new Promise((resolve, reject) => {

    $.ajax({

      type: "GET",

      url: "your request url",

      headers: {

         "Accept": "application/json;odata=verbose",

         "Content-Type": "application/json;odata=verbose",

      },

      dataType: 'json',

      success: function(data) {

         resolve(data);

      }),

      error: function(data) {

        reject(data);

      }

  });

}

这样定义之后，调用的时候直接如下：

func().then(data =>{

      //do something with data

});

同时该方法还巧妙的解决了顺序执行的问题，do something with data 逻辑在func()调用结束之后再调用。