1、Promise是什么
1.1 理解
- 抽象表达
Promise是一门新的技术（ES6规范）
Promise是JS种进行异步编程的新解决方案 - 具体表达
从语法上来说，promise是一个构造函数；
从功能上来说，promise对象用来封装一个异步操作并可以获取其成功/失败的结果值；
异步编程包括：fs文件操作，数据库操作，AJAX，定时器
// fs操作
require('fs').readFile('./index.html', (err, data) => {})
// Ajax
$.get('/server', (data) => {})
// 定时器
setTimeout(()=>{}, 2000)
2、为什么使用Promise
2.1 指定回调函数的方式更加灵活
- 原来的方式：必须在启动异步任务之前指定；
- promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数
2.2 支持链式调用，可以解决回调地狱问题
- 什么是回调地狱
回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件； - 回调地狱的缺点
不便于阅读和处理 - 解决方案
promise链式调用
3、初次使用
// promise形式实现
// resolve 解决，函数类型数据
// reject 拒绝，函数类型数据
const p = new Promise((resolve, reject) => {
setTimeout(()=> {
let n = rand(1, 100);
// 判断
if(n<=30){
resolve(); // 将promise对象的状态设置为成功
}else{
reject(); // 将promise对象的状态设置为失败
}
}, 1000);
});
// 调用then方法对promise中的resolve和reject进行定义
p.then(()=>{
console.log("选中，恭喜");
}, ()=>{
console.log("未选中，谢谢惠顾");
});
4、实践练习
4.1 fs模块
要求读取文件夹src下面的文件content.txt
// 1、采用回调函数的形式
const fs = require('fs');
fs.readFile('./src/content.txt', (err, data) => {
// 如果出错，则抛出错误
if(err) throw err;
// 输出文件内容
console.log(data.toString());
})
// 2、采用Promise的形式
let p = new Promise((resolve, reject) => {
fs.readFile('./src/content.txt', (err, data) => {
// 如果出错
if(err) reject(err);
// 如果成功
resolve(data);
});
});
//调用then
p.then(value => {
console.log(value.toString());
}, reason => {
console.log(reason);
})
4.2 ajax模块
点击按钮发送ajax请求
/*1、原来的方式*/
const btn = document.querySelector("#btn");
btn.addEventListener('click', function(){
// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化
xhr.open('GET', 'https://api.apiopen.top/getJoke');
// 3.发送
xhr.send();
// 4. 处理响应结果
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
// 判断响应状态码 2xx
if(xhr.status >= 200 && xhr.status < 300) {
// 输出响应体
console.log(xhr.response);
} else {
// 输出响应状态码
console.log(xhr.status);
}
}
}
})
/*使用promise*/
const btn = document.querySelector('#btn');
btn.addEventListener('click', function(){
const p = new Promise((resolve, reject) => {
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化
xhr.open('GET', 'https://api.apiopen.top/getJok');
// 3、发送
xhr.send();
// 4、处理响应结果
xhr.onreadystatechange = function(){
// 判断状态
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
})
});
p.then(value=>{
console.log(value);
}, reason=>{
console.warn();
})
5. promise的状态
状态指的是实例对象中的一个属性 【PromiseState】:
- pending -> resolved 成功
- pending -> rejected 失败
只有这两种，且一个promise对象只能改变一次，无论是成功还是失败，都有一个结果数据；
成功的结果一般称为value，失败的结果一般是reason；
6. promise 对象的值
实例对象中的另一个属性【PromiseResult】
保存异步任务【成功/失败】的结果
- resolve
- reject
7. promise的基本流程
基本流程
8. promise的相关API使用
8.1 promise构造函数
Promise(excutor){}
- executor函数：执行器
(resolve, reject) => {} - resolve 函数：内部定义成功时候我们调用的函数
value => {} - reject 函数：内部定义失败时候我们调用的函数
reason => {}
8.2 Promise.prototype.then 方法
(onResolved, onRejected) => {}
- onResolved函数：成功的回调函数
(value) => {} - onRejected函数：失败的回调函数
(reason) => {}
指定用于得到成功value的成功回调和用于得到失败reason的失败回调，返回一个新的Promise对象
8.3 Promise.prototype.catch 方法
(onRejected) => {}
- onRejected 函数：失败的回调函数
(reason) => {}
8.4 Promise.resolve方法
(value) => {}
- value：成功的数据或者promise对象
let p1 = Promise.resolve(521);
console.log(p1);
8.5 Promise.reject方法
(reason)=>{}
- reason: 失败的原因
8.6 Promise.all方法
(promises) => {}
- 返回一个新的promise，只有所有的promise都成功才能成功，只要有一个失败就直接失败；
8.7 Promise.race方法
(promises) => {}
