银川企业网站设计制作,湖南工业大学网址,wordpress 问答类主题,北京大兴网站建设1. 什么是 Promise#xff1f;
Promise 是 JavaScript 中处理异步操作的一种机制#xff0c;它可以让异步操作更加容易管理和控制。Promise 对象代表一个异步操作的最终完成或失败#xff0c;并提供了一种方式来处理操作的结果。
2. Promise 的基本语法
Promise 对象有三…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类型的属性时状态为fulfilledthen函数的返回值为对象的成功值如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 完成得快
});9. 总结
Promise 是 JavaScript 中处理异步操作的一种强大机制它可以让异步操作更加容易管理和控制。通过封装异步操作可以避免回调地狱使代码更加清晰和易于维护。
