当前位置：首页 > news >正文

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

news 2024/12/26 8:25:59

1. 什么是 Promise？

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

2. Promise 的基本语法

Promise 对象有三种状态：

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

改变Promise状态：Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。状态一旦改变，就不会再变，也就是说，Promise对象的状态改变是单向的。

Promise 的基本语法如下：

// 实例化promise对象
const promise = new Promise((resolve, reject) => {// 异步操作if (/* 异步操作成功 */) {resolve(value); // 将Promise对象的状态从“pending”变为“fulfilled”，同时将异步操作的结果，作为回调函数的参数} else {reject(reason); // 将Promise对象的状态从“pending”变为“rejected”，同时将异步操作报出的错误，作为回调函数的参数}
});promise.then(value => {// 成功时的回调函数，即当Promise的状态变为fulfilled时调用
}, reason => {// 失败时的回调函数，即当Promise的状态变为rejected时调用
});// 例如：
//实例化 Promise 对象
const p = new Promise(function(resolve, reject){setTimeout(function(){//// let data = '数据库中的用户数据';// resolve// resolve(data);let err = '数据读取失败';reject(err);}, 1000);
});//调用 promise 对象的 then 方法
p.then(function(value){console.log(value);
}, function(reason){console.error(reason);
})

3.Promise的then方法

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

4. Promise的catch方法

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

const p = new Promise((resolve, reject)=>{setTimeout(()=>{//设置 p 对象的状态为失败, 并设置失败的值reject("出错啦!");}, 1000)
});// p.then(function(value){}, function(reason){
//     console.error(reason);
// });p.catch(function(reason){console.warn(reason);
});

5. Promise 的实践

5.1 读取单个文件

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

// 引入 fs 模块
const fs = require('fs');// 使用 Promise 封装
const p = new Promise(function(resolve, reject){fs.readFile("./resources/为学.md", (err, data)=>{// 判断如果失败if(err) reject(err);// 如果成功resolve(data);});
});p.then(function(value){console.log(value.toString());
}, function(reason){console.log("读取失败!!");
});

5.2 读取多个文件

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

// 引入 fs 模块
const fs = require("fs");// 使用 promise 实现
const p = new Promise((resolve, reject) => {fs.readFile("./resources/为学.md", (err, data) => {resolve(data);});
});p.then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/插秧诗.md", (err, data) => {resolve([value, data]);});});
}).then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/观书有感.md", (err, data) => {// 压入value.push(data);resolve(value);});})
}).then(value => {console.log(value.join('\r\n'));
});

6.promise封装Ajax

function ajax(url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open('GET', url);xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {resolve(xhr.responseText);} else {reject(new Error(xhr.statusText));}}};xhr.send();});
}// 使用封装好的函数发送 AJAX 请求
ajax('https://api.example.com/data').then(data => {console.log(data);}).catch(error => {console.error(error);});

7. Promise.all()

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

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

8. Promise.race

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

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