【ES6复习条记】Promise对象详解（12）

1. 什么是 Promise？

Promise 是 JavaScript 中处理异步操作的一种机制，它可以让异步操作更加轻易管理和控制。Promise 对象代表一个异步操作的最终完成或失败，并提供了一种方式来处理操作的结果。
2. Promise 的基本语法

Promise 对象有三种状态：

• Pending（进行中）：初始状态，既不是成功，也不是失败。
  
• Fulfilled（成功）：操作成功完成。
  
• Rejected（失败）：操作失败。
  

改变Promise状态：Promise对象的状态改变，只有两种大概：从pending变为fulfilled和从pending变为rejected。状态一旦改变，就不会再变，也就是说，Promise对象的状态改变是单向的。
Promise 的基本语法如下：

1. // 实例化promise对象
2. const promise = new Promise((resolve, reject) => {
3.   // 异步操作
4.   if (/* 异步操作成功 */) {
5.     resolve(value); // 将Promise对象的状态从“pending”变为“fulfilled”，同时将异步操作的结果，作为回调函数的参数
6.   } else {
7.     reject(reason); // 将Promise对象的状态从“pending”变为“rejected”，同时将异步操作报出的错误，作为回调函数的参数
8.   }
9. });
11. promise.then(value => {
12.   // 成功时的回调函数，即当Promise的状态变为fulfilled时调用
13. }, reason => {
14.   // 失败时的回调函数，即当Promise的状态变为rejected时调用
15. });
18. // 例如：
19. //实例化 Promise 对象
20. const p = new Promise(function(resolve, reject){
21.     setTimeout(function(){
22.         //
23.         // let data = '数据库中的用户数据';
24.         // resolve
25.         // resolve(data);
27.         let err = '数据读取失败';
28.         reject(err);
29.     }, 1000);
30. });
32. //调用 promise 对象的 then 方法
33. p.then(function(value){
34.     console.log(value);
35. }, function(reason){
36.     console.error(reason);
37. })

复制代码

3.Promise的then方法

1. const p =new Promise((resolve, reject) =>{
2.     setTimeout(()=>{
3.         resolve('用户数据');
4.     })
5. });
7. //then（）函数返回的实际也是一个Promise对象
8. //1.当回调后，返回的是非Promise类型的属性时，状态为fulfilled，then（）函数的返回值为对象的成功值，如reutnr 123，返回的Promise对象值为123，如果没有返回值，是undefined
10. //2.当回调后，返回的是Promise类型的对象时，then（）函数的返回值为这个Promise对象的状态值
12. //3.当回调后，如果抛出的异常，则then（）函数的返回值状态也是rejected
13. let result = p.then(value => {
14.     console.log(value)
15.     // return 123;
16.     // return new Promise((resolve, reject) => {
17.     //     resolve('ok')
18.     // })
19.     throw 123
20. },reason => {
21.     console.log(reason)
22. })
23. console.log(result);

复制代码

4. Promise的catch方法

catch（）函数只有一个回调函数，意味着如果Promise对象状态为失败就会调用catch（）方法并且调用回调函数

1. const p = new Promise((resolve, reject)=>{
2.    setTimeout(()=>{
3.        //设置 p 对象的状态为失败, 并设置失败的值
4.        reject("出错啦!");
5.    }, 1000)
6. });
8. // p.then(function(value){}, function(reason){
9. //     console.error(reason);
10. // });
12. p.catch(function(reason){
13.    console.warn(reason);
14. });

复制代码

5. Promise 的实践

5.1 读取单个文件

使用 Promise 封装读取文件的操作：

1. // 引入 fs 模块
2. const fs = require('fs');
4. // 使用 Promise 封装
5. const p = new Promise(function(resolve, reject){
6.   fs.readFile("./resources/为学.md", (err, data)=>{
7.     // 判断如果失败
8.     if(err) reject(err);
9.     // 如果成功
10.     resolve(data);
11.   });
12. });
14. p.then(function(value){
15.   console.log(value.toString());
16. }, function(reason){
17.   console.log("读取失败!!");
18. });

复制代码

5.2 读取多个文件

使用 Promise 链式调用读取多个文件：

1. // 引入 fs 模块
2. const fs = require("fs");
4. // 使用 promise 实现
5. const p = new Promise((resolve, reject) => {
6.   fs.readFile("./resources/为学.md", (err, data) => {
7.     resolve(data);
8.   });
9. });
11. p.then(value => {
12.   return new Promise((resolve, reject) => {
13.     fs.readFile("./resources/插秧诗.md", (err, data) => {
14.       resolve([value, data]);
15.     });
16.   });
17. }).then(value => {
18.   return new Promise((resolve, reject) => {
19.     fs.readFile("./resources/观书有感.md", (err, data) => {
20.       // 压入
21.       value.push(data);
22.       resolve(value);
23.     });
24.   })
25. }).then(value => {
26.   console.log(value.join('\r\n'));
27. });

复制代码

6.promise封装Ajax

1. function ajax(url) {
2.   return new Promise((resolve, reject) => {
3.     const xhr = new XMLHttpRequest();
4.     xhr.open('GET', url);
5.     xhr.onreadystatechange = function() {
6.       if (xhr.readyState === 4) {
7.         if (xhr.status >= 200 && xhr.status < 300) {
8.           resolve(xhr.responseText);
9.         } else {
10.           reject(new Error(xhr.statusText));
11.         }
12.       }
13.     };
14.     xhr.send();
15.   });
16. }
18. // 使用封装好的函数发送 AJAX 请求
19. ajax('https://api.example.com/data')
20. .then(data => {
21.     console.log(data);
22.   })
23. .catch(error => {
24.     console.error(error);
25.   });

复制代码

7. Promise.all()

Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

1. let promise1 = Promise.resolve(3);
2. let promise2 = 42;
3. let promise3 = new Promise((resolve, reject) => {
4.   setTimeout(resolve, 100, 'foo');
5. });
7. Promise.all([promise1, promise2, promise3]).then((values) => {
8.   console.log(values);
9. });
10. // 输出: [3, 42, "foo"]

复制代码

8. Promise.race

Promise.race 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例，并以数组中，第一个完成的 Promise 实例的结果值，作为返回结果。

1. let promise1 = new Promise((resolve, reject) => {
2.   setTimeout(resolve, 500, 'one');
3. });
5. let promise2 = new Promise((resolve, reject) => {
6.   setTimeout(resolve, 100, 'two');
7. });
9. Promise.race([promise1, promise2]).then((value) => {
10.   console.log(value);
11.   // "two" —— 因为它比 promise1 完成得快
12. });

复制代码

9. 总结

Promise 是 JavaScript 中处理异步操作的一种强大机制，它可以让异步操作更加轻易管理和控制。通过封装异步操作，可以制止回调地狱，使代码更加清晰和易于维护。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。