笔记内容为 尚硅谷Web前端ES6教程,涵盖ES6-ES11 教学课程笔记整理
基础概念
- Promise 是 ES6 引入的异步编程的新解决方案
- 语法上 Promise 是一个
构造函数,用来封装异步操作并可以获取其成功或失败的结果 - Promise 语法:
- Promise 构造函数:
Promise (excutor) {} Promise.prototype.then方法,then 方法第一个参数代表 resolve 的回调,第二个参数代表 reject 的回调Promise.prototype.catch方法
- Promise 构造函数:
- 一个例子:
// 实例化 Promise 对象
const p = new Promise(function(resolve, reject){
setTimeout(function(){
// 成功 resolve
// let data = '数据库中的用户数据';
// resolve(data);
// 失败 reject
let err = '数据读取失败';
reject(err);
}, 1000)
});
// 调用 Promise 对象的 then 方法
p.then(function(value){
console.log(value); // 如果 p 的状态是 resolve,则输出 '数据库中的用户数据'
}, function(reason){
console.error(reason); // 如果 p 的状态是 reject,则输出 '数据读取失败'
})
Promise 封装读取文件
- 首先在 resource 文件夹下创建一个
.md文档,写入想要读取的内容 - 创建一个 Promise.js 的文件用来读取文档
- Promise.js 中会用到
node.js的一些 api- 引入 fs 模块
const fs = require('fs') - 调用方法读取文件
fs.readFile('./resource/为学.md', (err, data) => { // 如果失败,则抛出错误 if(err) throw err; // 如果没有出错,则输出内容 console.log(data.toString()); }); - 引入 fs 模块
4. 使用 Promise 封装
const p = new Promise(function(resolve, reject){
fs.readFile("./resource/为学.md", (err, data) => {
// 判断如果失败
if(err) reject(err);
// 如果成功
resolve(data);
})
});
p.then(function(value){
console.log(vaule.toString());
}, function(reason){
console.log("读取失败!");
});
Promise 封装 AJAX 请求
- 首先使用原生的 AJAX 向一个 URL 发送一个请求
- 接着使用 Promise 封装这个 AJAX 请求
Promise.prototype.then
- 使用 Promise 创建一个对象 p
- 使用
.then语法,可以指定回调,对成功或失败的结果做一个处理
then 方法的返回结果
then方法的返回结果,也是一个 promise 对象- 对象状态由回调函数的执行结果决定
- 如果回调函数中返回的结果是
非 promise 类型的属性,状态为成功,返回值为对象的成功的值
- 如果回调函数中返回的结果是
promise 对象,则状态和返回值与该 promise 对象相同
- 如果抛出错误,则状态为
失败,返回值为抛出的错误
链式调用
- 因为
then方法的返回结果也是一个promise对象,因此,可以进行链式调用 then方法的参数可以只写成功的回调,不写失败的回调
多个文件内容读取
- 普通写法,会造成回调地狱
- 使用
promise实现
Promise.prototype.catch
- 用来指定 Promise 对象失败的回调
p.catch()和p.then(function(value){}, function(reason){})是等价的,前者可以直接指定失败的回调,后者的第二个参数表示失败的回调