ES6-promise实现异步请求

一、Promise是什么

　　简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

      ES6规定，Promise对象是一个构造函数，用来生成Promise实例。Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject,这两个参数都是函数。

new Promise(function(resolve,reject){ 异步操作 ajax 定时器等{ if(结果满意) resolve(value) else reject(error) } })

二、then方法

     Promise 实例生成以后，可以用then 方法分别指定resolve和reject的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供 。这两个函数都接受Promise 对象传出的值作为参数。

function timeout(ms) { return new Promise((resolve, reject) => { if(ms>=100) setTimeout(resolve, ms, 'done'); //setTimeout的第三个参数用于给第一个参数(函数)传参
    else setTimeout(reject, ms, 'error'); //setTimeout的第三个参数用于给第一个参数(函数)传参
 }); } timeout(100).then((value) => { console.log(value); //done
},(error)=>{ console.log(error) }); timeout(100).then((value) => { console.log(value); },(error)=>{ console.log(error) //error
});

三、promise中 的catch（）方法 

• catch方法用于指定发生错误时的回调

timeout(100).then((value) => { console.log(value); }.catch((error)=>{ console.log(error) });

• catch可以检测resolve中抛出的异常

timeout(100).then((value) => { console.log(value); console.log(somethingUndefined) }).catch((error)=>{ console.log(error) //somethingUndefined is not defined
});//如果resolve中发生异常，JS不会报错，而会把错误抛给catch的第一个参数

四、Promise手动封装ajax函数

<script>
       // ajax函数默认的参数
       let ajaxDefaultOptions = { url: '#', // 请求地址，默认为空
           method: 'GET', // 请求方式，默认为GET请求
           async: true, // 请求同步还是异步，默认异步
           timeout: 0, // 请求的超时时间
           dataType: 'text', // 请求的数据格式，默认为text
           data: null, // 请求的参数，默认为空
           headers: {}, // 请求头，默认为空
           onprogress: function () {}, // 从服务器下载数据的回调
           onuploadprogress: function () {}, // 处理上传文件到服务器的回调
           xhr: null // 允许函数外部创建xhr传入，但是必须不能是使用过的
 }; function _ajax(paramOptions) { //将传入的参数和默认值合并
 let options = {}; for (const key in ajaxDefaultOptions) { options[key] = ajaxDefaultOptions[key]; } // 如果传入的是否异步与默认值相同，就使用默认值，否则使用传入的参数
           options.async = paramOptions.async === ajaxDefaultOptions.async ? ajaxDefaultOptions.async : paramOptions.async; // 判断传入的method是否为GET或者POST,否则传入GET 或者可将判断写在promise内部，reject出去
           options.method = paramOptions.method ? ("GET" || "POST") : "GET"; // 如果外部传入xhr，否则创建一个
           let xhr = options.xhr || new XMLHttpRequest(); // return promise对象
           return new Promise(function (resolve, reject) { xhr.open(options.method, options.url, options.async); xhr.timeout = options.timeout; // 设置请求头
               for (const key in options.headers) { xhr.setRequestHeader(key, options.headers[key]); } // 注册xhr对象事件
               xhr.responseType = options.dataType;
 
 //从服务器上下载数据每50ms触发一次 xhr.onprogress = options.onprogress; xhr.onuploadprogress = options.onuploadprogress; // 开始注册事件
               // onloadend：请求结束，无论成功或者失败
               xhr.onloadend = function () { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { resolve(xhr); } else { reject({ errorType: "status_error", xhr: xhr }); } }; // 请求超时
               xhr.ontimeout = function () { reject({ errorType: "timeout_error", xhr: xhr }); }
 // ，服务器异常，请求错误
               xhr.onerror = function () { reject({ errorType: "onerror", xhr: xhr }); }
 // abort错误(未明白，只知道是三种异常中的一种)
               xhr.onabort = function () { reject({ errorType: "onabort", xhr: xhr }); }
 // 捕获异常
               try { xhr.send(options.data); } catch (error) { reject({ errorType: "send_error", error: error }); } }); } // 调用示例
 _ajax({ url: 'http://localhost:3000/suc', async: true, onprogress: function (evt) { console.log(evt.position / evt.total); }, dataType: 'text/json' }).then( function (xhr) { console.log(xhr.response); }, function (e) { console.log(JSON.stringify(e)) }); </script>

 

参考文章：

https://blog.csdn.net/dkr380205984/article/details/81303171

阮一峰：https://blog.csdn.net/bangbanggangan/article/details/81102052

https://www.cnblogs.com/kazetotori/p/6037940.html

https://blog.csdn.net/weixin_42614080/article/details/90762439

https://blog.csdn.net/qq_38796823/article/details/88209426