promise对象学习

最新推荐文章于 2025-03-22 10:00:00 发布

原创最新推荐文章于 2025-03-22 10:00:00 发布 · 676 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #promise #异步

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文主要探讨了JavaScript中的Promise对象，详细讲解了如何使用Promise处理异步操作。通过实例代码，解释了Promise的工作原理，包括其状态转换和链式调用。同时，提到了在实际项目中，Promise与jQuery的$.ajax方法结合使用的注意事项，需要引入jquery.min.js和promise.min.js库。

js代码：

/*
 * 利用promise对象异步处理http请求获取数据
 * */
 var obj=function () {
  this.url='data/user.json';
};

obj.prototype.showdetaildata=function () {
  var that = this;
   // alert('ss');
  that.getdetaildata().then(function (data) {
      var detaildata= data.data.detail;
      //alert(detaildata);


     detaildata.forEach(function (item) {
         document.write(item.name+","+item.age+";");
     });

   /*   for(var i=0;i<detaildata.length;i++) {
          document.write(detaildata[i].name+","+detaildata[i].age+";");
      }*/

  });
};

obj.prototype.getdetaildata = function () {
 var that = this;
 return new Promise(function(resolve,reject){

     $.ajax({
         url: that.url,
         type: "GET",
         data: null,
         success: function (data) {
             resolve(data);
         },
         error:function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status);
          alert(XMLHttpRequest.readyState);
          alert(textStatus);
          reject;
          },

         dataType: "json"
     });
   });
};
var obj=new obj();
obj.showdetaildata();

json文件

{
  "data": {

    "detail": [
      {
        "name": "樱木",
        "age": 18
      },
      {
        "name": "银桑",
        "age": 23
      },
      {
        "name": "路飞",
        "age": 20
      }

    ]
  },
  "boolean": true,
  "null": null,
  "number": 123,
  "object": {
    "a": "b",
    "c": "d",
    "e": "f"
  },
  "string": "Hello World"
}

PS:需要依赖jquery.min.js和promise.min.js库