promise手撕

1.Promise：2个属性，2个回调，3种状态，4种方法

2个属性：

​ PromiseState(状态)、PromiseResult(return 结果)

​

2个回调：

​ resolve, reject

3种状态：
未决定的：pending：未曾回调方法

​

​ 成功：resolved、fulfilled：回调了resolve()

​
​ 失败：rejected：回调了rejected()

​

​ 状态变化：
​ （1）从pending变成resolved/fulfilled
​ （2）从pending变成reject

4种方法：

then和catch方法、resolve和reject方法

1. 基本使用

   const p = new Promise((reresolve, reject) => {
     setTimeout(() => {
       let data = '用户'
       // resolve(data)
       reject(data)
     }, 1000);
   }).then((res) => {
     console.log(res);
   }, (rej) => {
     console.error(rej);
   });
   

2. 引入 fs 模块

   读取文件

   const fs = require('fs');
   const p = new Promise((resolve, reject) => {
     fs.readFile('./文件', (err, data) => {
       if (err) reject(err);
       resolve(data);
     })
   }).then((res) => {
     console.log(res.toString());
   }, (rej) => {
     console.error(rej);
   });
   

3. 封装Ajax

   //1.创建对象
   const p = new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
     //2.初始化
     xhr.open("GET", "https://api.apiopen.top/getJoke")
     //3.发送
     xhr.send();
     //4.绑定事件，处理响应结果
     xhr.onreadystatechange = function () {
       //判断
       if (xhr.readyState === 4) {
         //判断响应状态码 200——300
         if (xhr.status >= 200 && xhr.status < 300) {
           //成功
           resolve(xhr.response)
         } else {
           //失败
           reject(xhr.status)
         }
       }
     }
   }).then((res) => {
     console.log(res);
   }, (rej) => {
     console.log(rej);
   });
   

4. Promise.Prototype.then方法：返回值依然是promise类型

   const p = new Promise((resolve, reject) => {
     resolve('用书');
     // reject('出错拉')
   });
   
   const a = p.then(res => {
     //以下三种取一种演示
     //1. 非promise类型 ：成功状态
     return 111;
     //2. 是promise类型 ：根据嵌套内部的promise返回的成功或失败状态
     return new Promise((resolve, reject) => {
       // reject('出错拉')
       resolve();
     });
     //3.抛出错误：失败状态
     throw err;
   }, rej => {
     console.log(rej);
   });
   console.log(a);
   
   

5. 链式调用：避免回调地狱

   const p = new Promise((resolve, reject) => {
     // resolve('用书');
     reject('出错拉')
   });
   
   const a = p.then(res => {
     return res;
   }, rej => {
     console.log(rej);//出错拉
     return 11;
   }).then((res) => {
     console.log(res);
   }, (rej) => {
     console.log(rej);//11 取决于上一个函数的return值
   });
   console.log(a);
   
   

   解决回调地狱

   //原始办法
   const fs = require('fs');
   
   // fs.readFile('./文件', (err, data) => {
   //   fs.readFile('./文件2', (err, data2) => {
   //     fs.readFile('./文件3', (err, data3) => {
   //       console.log(data + data2 + data3);
   //     })
   //   })
   // })
   
   //Promise 办法
   const p = new Promise((resolve, rejects) => {
     fs.readFile('./文件', (err, data) => {
       resolve(data)
     })
   }).then(value => {
     return new Promise((resolve, rejects) => {
       fs.readFile('./文件2', (err, data) => {
         resolve([value, data])
       })
     })
   }).then(value => {
     fs.readFile('./文件3', (err, data) => {
       value.push(data)
       console.log(value.join('\r\n'));
     })
   })
   
   

   

6. catch方法：主要捕捉失败状态

   const p = new Promise((resolve, reject) => {
     reject('出错啊');
   }).catch((rej) => {
     console.error(rej);
   });