欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用promise封装ajax

程序员文章站 2023-12-01 23:45:28
首先贴代码 注释: 1,open(method, url, async) method: GET和POST; url: 发送到服务端的url; async: 异步true,同步false; 2,onreadystatechange 每当readyState的值变化,onreadystatechang ......

首先贴代码

 1 var ajaxoptions = {
 2     url: 'url',
 3     method: 'get',
 4     async: true,
 5     data: null,
 6     datatype: 'text',
 7 }
 8 
 9 function ajax(protooptions) {
10     var options = {};
11 
12     for(var i in ajaxoptions){
13         options[i] = protooptions[i] || ajaxoptions[i];
14     }
15     
16 
17     return new promise(function(resolve, reject){
18         var xhr = new xmlhttprequest();
19 
20         xhr.open(options.method, options.url, options.async);
21 
22         xhr.onreadystatechange = function() {
23             if (this.readystate === 4 && this.status === 200) {
24                 resolve(this.responsetext, this);
25             } else {
26                 var resjson = {
27                     code: this.status,
28                     response: this.response
29                 }
30                 reject(resjson, this)
31             }
32         }
33 
34         xhr.send()
35 
36     })
37 }

注释:

1,open(method, url, async) 

  method:  get和post;

  url: 发送到服务端的url;

  async: 异步true,同步false;

2,onreadystatechange

  每当readystate的值变化,onreadystatechange函数自动执行

3,readystate 服务器响应的状态信息

  

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

  当readystate的值为4,status状态为200时表示相应已就绪,可以执行成功调用的方法,反之调用失败调用的方法