【JS016】ES6的学习笔记之Promise

日期：2021年9月15日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006
如果您想了解更多有关javascript的知识，那么请点《javascript学习的奇妙之旅》

---

---

一、Promise初识

说明：Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

普通函数写法：

//（1）创建一个 Promise 实例
console.log("（1）定义一个 Promise");
const p = new Promise(function(resolve,reject){
    setTimeout(function(){
        //（2）“成功”或“失败”，二选一执行
        console.log(111);
        //（2-1）成功
        resolve("Hello Promise ^-^");
        //（2-2）失败
        // reject("failed -_-");
    }, 2000);
});
console.log(222);
console.log(p);
console.log(333);

//（2）调用 then 方法
console.log("（2）调用 then 方法");
p.then(function(value){
    console.log(value);
},function(reason){
    console.warn(reason);
})

箭头函数写法：

//（1）创建一个 Promise 实例
console.log("（1）定义一个 Promise");
const p = new Promise((resolve,reject) => {
    setTimeout(() => {
        //（2）“成功”或“失败”，二选一执行
        console.log(111);
        //（2-1）成功
        resolve("Hello Promise ^-^");
        //（2-2）失败
        // reject("failed -_-");
    }, 2000);
});
console.log(222);
console.log(p);
console.log(333);

//（2）调用 then 方法
console.log("（2）调用 then 方法");
p.then(value => {
    console.log(value);
},reason => {
    console.warn(reason);
})

一个 Promise 必然处于以下几种状态之一：

状态	译意	说明
pending	待定	初始状态，既没有被兑现，也没有被拒绝
fulfilled	已兑现	意味着操作成功完成
rejected	已拒绝	意味着操作失败

• 状态：已兑现

• 状态：已拒绝

二、Promise封装AJAX

• 普通版AJAX

//CSDN官网：
let url = "https://blog.csdn.net";

//（1）创建对象
const xhr = new XMLHttpRequest();
// console.log(xhr);

//（2）初始化
xhr.open("GET",url);

//（3）发送
xhr.send();

//（4）绑定事件，处理响应结果
xhr.onreadystatechange = function(){
    //判断
    if(xhr.readyState===4){
        if(xhr.status>=200 && xhr.status<300){
            //成功
            console.log(xhr.response);
        }else{
            //失败
            console.error(xhr.status);
        };
    }
};

• Promise版AJAX

const p = new Promise((resolve,reject)=>{
    //CSDN官网：
    let url = "https://blog.csdn.net";

    //（1）创建对象
    const xhr = new XMLHttpRequest();
    // console.log(xhr);

    //（2）初始化
    xhr.open("GET",url);

    //（3）发送
    xhr.send();

    //（4）绑定事件，处理响应结果
    xhr.onreadystatechange = function(){
        //判断
        if(xhr.readyState===4){
            if(xhr.status>=200 && xhr.status<300){
                //成功
                // console.log(xhr.response);
                resolve(xhr.response);
            }else{
                //失败
                // console.error(xhr.status);
                reject(xhr.status);
            };
        }
    };
});

//调用
console.log("Start-then");
p.then(value=>{
    console.log(value);
},reason=>{
    console.error(reason);
});
console.log("End-then");

---

参考文章：
1、《Web 开发技术》之Promise
2、《ECMAScript 6 入门》之Promise 对象

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/120285005