视频教程地址：https://www.bilibili.com/video/BV1GA411x7z1
简介
干啥的？
解决异步编程问题的新的解决方案。
优势：
- 支持链式调用，解决回调地狱问题。
指定回调函数的方式更加灵活
总结一下：<br />Promise实例化时需要接收一个参数，这个参数是这样一个函数：
```javascript
(resolve, reject)=>{
//函数体:在此包裹封装异步任务
if(成功)
调用resolve(args1) //该函数会将promise的状态设置为『成功』
else(失败)
调用reject(args2) ////该函数会将promise的状态设置为『失败』
}
那么resolve和reject这俩形参什么时候传呢？在哪里传呢？
答：实例化之后在.then()方法内传
p.then((args1)=>{ // 这个函数是传给resolve的实参，其参数列表同上面的args1
}, (args2) => { // 这个函数是传给reject的实参，其参数列表同上面的args2
})
文件操作
//
const fs = require('fs');
//回调函数 形式
// fs.readFile('./resource/content.txt', (err, data) => {
// // 如果出错 则抛出错误
// if(err) throw err;
// //输出文件内容
// console.log(data.toString());
// });
//Promise 形式
// 第一步：创建Promise对象
let p = new Promise((resolve , reject) => {
// =============用Promise对异步操作进行封装============
fs.readFile('./resource/content.tx', (err, data) => {
//如果出错
if(err) reject(err);
//如果成功
resolve(data);
});
});
// 第二步：调用 then
p.then(value=>{
console.log(value.toString());
}, reason=>{
console.log(reason);
});
AJAX请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise 封装 AJAX</title>
<link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 封装 AJAX 操作</h2>
<button class="btn btn-primary" id="btn">点击发送 AJAX</button>
</div>
<script>
//接口地址 https://api.apiopen.top/getJoke
//获取元素对象
const btn = document.querySelector('#btn');
btn.addEventListener('click', function(){
//第一步：创建 Promise对象
const p = new Promise((resolve, reject) => {
//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){
//控制台输出响应体
resolve(xhr.response);
}else{
//控制台输出响应状态码
reject(xhr.status);
}
}
}
});
//第二步：调用then方法
p.then(value=>{
console.log(value);
}, reason=>{
console.warn(reason);
});
});
</script>
</body>
</html>
封装fs
/**
* 封装一个函数 mineReadFile 读取文件内容
* 参数: path 文件路径
* 返回: promise 对象
*/
function mineReadFile(path){
return new Promise((resolve, reject) => {
//读取文件
require('fs').readFile(path, (err, data) =>{
//判断
if(err) reject(err);
//成功
resolve(data);
});
});
}
mineReadFile('./resource/content.txt')
.then(value=>{
//输出文件内容
console.log(value.toString());
}, reason=>{
console.log(reason);
});
util.promisify()方法的使用
https://www.jianshu.com/p/6b425c27f149
该方法只对错误优先的回调风格的函数有用。
/**
* util.promisify 方法
*/
//引入 util 模块
const util = require('util');
//引入 fs 模块
const fs = require('fs');
//返回一个新的函数
let mineReadFile = util.promisify(fs.readFile);
mineReadFile('./resource/content.txt').then(value=>{
console.log(value.toString());
});
封装AJAX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise封装AJAX操作</title>
</head>
<body>
<script>
/**
* 封装一个函数 sendAJAX 发送 GET AJAX 请求
* 参数 URL
* 返回结果 Promise 对象
*/
function sendAJAX(url){
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
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('https://api.apiopen.top/getJok')
.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
</script>
</body>
</html>
Promise实例对象的两个属性
状态属性：PromiseState
实例对象中的一个属性 『PromiseState』，它的可能取值共有三种
- pending 未决定的
- resolved / fullfilled 成功
- rejected 失败
状态变化的方向只有两种
- pending变为 resolved
- pending变为 rejected
说明:
resolve
- reject
promise的工作流程
Promise API
- Promise构造函数 : Promise (excutor) {}
(1) executor函数 : 执行器 (resolve, reject) => {}
(2) resolve函数 : 内部定义成功时我们调用的函数 value => {}
(3) reject函数 : 内部定义失败时我们调用的函数 reason => {}
说明: executor会在 Promise内部立即同步调用 ,异步操作在执行器中执行Promise.prototype.then()
- Promise.prototype.then方法 : (onResolved, onRejected) => {}
(1) onResolved函数 : 成功的回调函数 (value) => {}
(2) onRejected函数 : 失败的回调函数 (reason) => {}
说明: 指定用于得到成功 value的成功回调和用于得到失败 reason的失败回调返回一个新的promise对象Promise.prototype.catch()
- Promise.prototype.catch方法 : (onRejected) => {}
(1) onRejected函数 : 失败的回调函数 (reason) => {}
说明: then()的语法糖 , 相当于 : then(undefined, onRejected)Promise.resolve()
- Promise.resolve方法 : (value) => {}
(1) value: 成功的数据或 promise对象
说明:
- 返回一个成功 /失败的 promise对象。
- 该方法就是为了快速得到一个Promise对象 ```javascript //1、如果传入的参数为非Promise类型的对象,则返回的结果为成功promise对象 let p1 = Promise.resolve(521); console.log(p1); // 521
//2、如果传入的参数为 Promise 对象, 则参数的结果决定了resolve的结果 let p2 = Promise.resolve(new Promise((resolve, reject) => { // resolve(‘OK’); reject(‘Error’); })); console.log(p2); //Error p2.catch(reason => { console.log(reason); //Error ```
Promise.reject()
- Promise.reject方法 : (reason) => {}
(1) reason: 失败的原因
说明: 返回一个失败的 promise对象。传入什么，失败的结果就是什么。Promise.all()
- Promise.all方法 : (promises) => {}
(1) promises: 包含 n个 promise的数组
说明: 返回一个新的 promise, 只有所有的 promise都成功才成功 , 只要有一个失败了就直接失败Promise.race()
- Promise.race方法 : (promises) => {}
(1) promises: 包含 n个 promise的数组
说明: 返回一个新的 promise, 第一个完成的 promise的结果状态就是最终的结果状态
Promise的几个关键问题
如何改变 promise的状态 ?
(1) resolve(value): 如果当前是 pending就会变为 resolved
(2) reject(reason): 如果当前是 pending就会变为 rejected
(3) 抛出异常 : 如果当前是 pending就会变为 rejected一个 promise使用then方法指定多个成功 /失败回调函数 , 都会调用吗 ?
当promise改变为对应状态时都会调用改变 promise状态和指定回调函数谁先谁后 ?
(1) 都有可能 , 正常情况下是先指定回调再改变状态 , 但也可以先改状态再指定回调
(2) 如何先改状态再指定回调 ?
① 在执行器中直接调用 resolve()/reject()
② 延迟更长时间才调用 then()
(3) 什么时候才能得到数据 ?
① 如果先指定的回调 , 那当状态发生改变时 , 回调函数就会调用 , 得到数据
② 如果先改变的状态 , 那当指定回调时 , 回调函数就会调用 , 得到数据
4. promise.then()返回的新 promise的结果状态由什么决定 ?
(1) 简单表达 : 由 then()指定的回调函数执行/返回的结果决定
(2) 详细表达 :
① 如果抛出异常 , 新 promise变为 rejected, reason为抛出的异常
② 如果返回的是非 promise的任意值 , 新 promise变为 resolved, value为返回的值
③ 如果返回的是另一个新 promise, 此 promise的结果就会成为新 promise的结果
5. promise如何串连多个操作任务 ?
(1) promise的 then()返回一个新的 promise, 可以开成 then()的链式调用
(2) 通过 then的链式调用串连多个同步 /异步任务
6. promise异常传透 ?
(1) 当使用 promise的 then链式调用时 , 可以在最后指定失败的回调 ,
(2) 前面任何操作出了异常 , 都会传到最后失败的回调中处理
7. 中断 promise链 ?
(1) 当使用 promise的 then链式调用时 , 在中间中断 , 不再调用后面的回调函数
(2) 办法 : 在回调函数中返回一个 pendding状态的 promise对象
手写Promise
async和await
若有收获，就点个赞吧
0 人点赞
