如何使用Promise来封装Ajax

题目：

请使用Promise封装Ajax操作 原始的Ajax操作如下：

var onSuccess = function(result){}; //成功的回调
var onFail = function(error){}; //失败的回调
var xhr = new XMLHttpRequest();
xhr.open("POST", "www.baidu.com", true);
xhr.onload = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    onSuccess(xhr.response);
  } else {
    onFail(xhr.statusText);
  }
}
xhr.onerror = function(){
  onFail(Error("网络异常"));
}

答案：

const promise = new promise((resove,reject)=>{
    var xhr = new XMLTttpRequest();
    xhr.open("post","http://www.baidu.com",true);
    xhr.onload = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            onSuccess(xhr.response);
       } else {
         onFail(xhr.statusText); 
      }
}
  xhr.onerror = function(){
  onFail(Error("网络异常"));  
})

Ajax相关知识点：

Ajax是一种创建交互式网页应用的网页开发技术，目的在于无须重新加载整个网页的情况下更新部分网页，做到局部刷新的作用。Ajax的一种典型应用就是网页搜索提示。

XMLHttpRequest对象常用属性：

（1）onreadystatechange:用于设置事件处理函数；
（2）readystate:用于返回Ajax请求的处理状态，readystate属性共有5种取值：

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

（3）status：用于返回服务器处理HTTP状态码；
（4）responseText和responseXML：用于获取服务器对HTTP请求的响应内容。如果响应内容是普通文本字符串则是第一个，如果是XML格式的则为第二个。

关于Ajax的知识可参考我之前一篇博文，接下来说说Promise相关内容。

Promise相关知识点：

主要解决异步深层嵌套的问题，它提供了简洁的API使得异步操作更加容易。

promise的使用：

使用new来构造const promise = new Promise()，Promise的构造函数接收一个参数是函数，并传入两个参数：resove和reject，分别表示异步操作执行成功和失败后的回调函数。

//Promise实例
var p = new Promise(function(resove,reject){
    //实现异步任务
    setTimeout(function(){
      var flag = false;
      if(flag){
          resove('hello')
      }else{
          reject('出错了！')
      }
      },1000)
})

Promise实例生成后使用实例方法，但想要实现链式编程需要return。

基于Promise发送Ajax请求：

//封装一个Promise函数
function queryData (url){
 //创建一个Promise实例
 var p = new Promise(function(resove,reject){
     var xhr = XMLHttpRequest();
     xhr.onreadystatechange = function(){
         if(xhr.readystate !== 4) return;
         if(xhr.readystate == 4&&xhr.status==200) {
             //处理正常情况
             resove('xhr.responseText');
         }else{
             //处理异常情况
             reject('服务器错误')；
         }
     }
     xhr.open('get',url);
     xhr.send();
 })
 return p;
}
//用实例方法调用封装函数
queryData('http://localhost:3000/data')
    .then(function(data){
    console.log(data);
    //想要使用链式编程需要return返回，并且返回的数据将是下一次then方法参数函数的data参数
    return queryData('http://localhost:3000/data1')
})
  .then(function(data){
    console.log(data);
})

注意：对于then()的参数中的函数返回值，如果返回的是Promise对象，则会调用下一个then()，如果是返回的普通值，会直接传递给下一个then()，通过它的参数函数的参数来接收。

Promise常用实例方法：

（1）then()，用于得到正确的返回结果
（2）catch()，获取异常信息，具体用法与上面代码中then()方法一致。