Promise这篇文章让你一步到位,安排!!!
- Promise介绍与基本使用
(1)抽象表达:
Promise是一门新的技术(ES6规范);
Promise是JS中进行异步编程(fs文件操作、数据库操作、定时器、AJAX)新解决方案;
(旧方案是单纯使用回调函数)
(2)具体表达:
从语法上:Promise是一个构造函数
从功能上:Promise对象用来封装异步 操作并可以获取其成功/失败的结果值
(3)与回调函数相比,优势
- 指定回调函数的方式更加灵活
旧的:必须在启动异步任务前指定
promise: 启动异步任务 => 返会promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个) - 支持链式调用,可以解决回调地狱问题
回调地狱:回调函数嵌套使用,外部回调函数异步执行的结果是嵌套的回调执行的条件,金字塔型。
回调地狱缺点:不便于阅读、不便于异常处理
// 定时器 抽奖
setTimeout(() => {
let n = Math.random() * 10 + 1;
if (n <= 3) {
alert('恭喜中奖了');
}else {
alert('再接再厉');
}
}, 1000);
// 利用promise形式实现
// 两个状态只能二选一
// resolve 解决 函数类型的数据
// reject 拒绝 函数类型的数据
const p = new Promise((resolve, reject) => {
// promise 可以包裹异步操作
setTimeout(() => {
let n = Math.random() * 10 + 1;
if (n <= 3) {
resolve(n); // 将promise的状态设置成 成功
}else {
reject(n); // 将promise的状态设置成 失败
}
}, 1000);
});
// 调用then方法
// 接受参数
p.then((value) => {
// 成功时调用
alert('恭喜中奖了' + '中奖值为' + value);
}, (reason) => {
// 失败时调用
alert('再接再厉' + reason);
});
util.promisify
错误优先的API。在fs模块当中的API(异步函数的API)大多是以err是第一个参数。这里返回一个promise的版本
// fs文件读取
// 封装
function mineReadFile(path) {
return new Promise((resolve, reject) => {
require('fs').readFile(path, (err, data) => {
if(err) reject(err);
resolve(data);
});
});
}
mineReadFile('路径名').then(value => {
console.log(value);
}, reason => {
console.log(reason);
});
// 引入util.promisify方法
const util = require('util');
const fs = reequire('fs');
// 返回一个新的函数
let mineReadFile = util.promisify(fs.readFile);
// 用法有点类似前面p的写法
minReadFile('路径名').then(value => {
console.log(value.toString());
});
让我们一起试着封装AJAX请求,用
promise
function sendAJAX(url) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url );
xhr.send();
// 处理结果
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
}else {
reject(xhr.status);
}
}
}
}
sendAJAX('接口url').then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
- promise的状态改变
promise实例对象的一个属性 [PromiseState]
- pending 未决定的/ 等待
- resolved / fullfilled 成功
- rejected 失败
(1)pending变为resolved
(2)pending变为rejected
说明:只有这两种,且一个promise对象只能改变一次;无论变成成功还是失败,都会有一个结果数据;成功的结果数据一般为value,失败的结果数据一般为reason。
只有这两个函数才能改变状态 - resolve
- reject
- Promise的API
Promise构造函数:Promise(excutor) {}
(1)executor 函数:执行器 (resolve, reject) => {}
(2)resolve 函数:内部定义成功时调用的函数 value => {}
(3)reject 函数:内部定义失败时调用的函数 reason => {}
说明:executor会在Promise内部立即同步调用,异步操作在执行器中执行
Promise.prototype.then方法:(onResolved, onRejected) => {}
(1)onResolved 函数:成功的回调函数 (value) => {}
(2)onRejected 函数:失败的回调函数 (reason) => {}
说明:指定用于得到成功value的成功回调和用于失败reason的失败回调,返回的是一个新的promise对象
Promise.prototype.catch方法:(onRejected) => {}
(1)onRejected 函数:失败的回调函数 (reason) => {}
Promise resolve方法:(value) => {}
(1)value: 成功的数据或Promise对像
说明:返回一个成功/失败的promise对象,取决于传入参数,参数为promise,就由内部promise的结果决定;参数为非promise,则返回状态为成功,结果为参数
Promise.reject方法:(reason) => {}
(1)reason: 失败的原因
说明:返回一个失败的promise对象
Promise.all方法:(promise) => {]
(1)promise:包含n个promise的数组
说明:返回一个新的promise,只有所有的promise都成功才成功,,结果是所有promise成功的值组成的数组;只要有一个失败就直接失败,返回Error
Promise.race方法:(promise) => {}
(1)promise包含n个promise的数组
说明:返回一个新的promise,第一个决定的promise的结果状态就是最终的结果状态
浙公网安备 33010602011771号