ES6 学习笔记 —— (二)Promise

161 阅读2分钟

笔记内容为 尚硅谷Web前端ES6教程,涵盖ES6-ES11 教学课程笔记整理

基础概念

  • Promise 是 ES6 引入的异步编程的新解决方案
  • 语法上 Promise 是一个 构造函数,用来封装异步操作并可以获取其成功或失败的结果
  • Promise 语法:
    1. Promise 构造函数:Promise (excutor) {}
    2. Promise.prototype.then 方法,then 方法第一个参数代表 resolve 的回调,第二个参数代表 reject 的回调
    3. Promise.prototype.catch 方法
  • 一个例子:
// 实例化 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 封装读取文件

  1. 首先在 resource 文件夹下创建一个 .md 文档,写入想要读取的内容
  2. 创建一个 Promise.js 的文件用来读取文档
  3. Promise.js 中会用到 node.js 的一些 api
    1. 引入 fs 模块 const fs = require('fs')
    2. 调用方法读取文件
    fs.readFile('./resource/为学.md', (err, data) => {
        // 如果失败,则抛出错误
        if(err) throw err;
        // 如果没有出错,则输出内容
        console.log(data.toString());
    });
    

图片.png 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("读取失败!");
});

图片.png

Promise 封装 AJAX 请求

  • 首先使用原生的 AJAX 向一个 URL 发送一个请求

图片.png

  • 接着使用 Promise 封装这个 AJAX 请求

图片.png

Promise.prototype.then

  • 使用 Promise 创建一个对象 p
  • 使用 .then 语法,可以指定回调,对成功或失败的结果做一个处理

图片.png

then 方法的返回结果

  • then 方法的返回结果,也是一个 promise 对象
  • 对象状态由回调函数的执行结果决定

图片.png

  1. 如果回调函数中返回的结果是 非 promise 类型 的属性,状态为 成功,返回值为 对象的成功的值

图片.png

  1. 如果回调函数中返回的结果是 promise 对象,则状态和返回值与该 promise 对象相同

图片.png

  1. 如果抛出错误,则状态为 失败,返回值为抛出的 错误

图片.png

链式调用

  • 因为 then 方法的返回结果也是一个 promise 对象,因此,可以进行链式调用
  • then 方法的参数可以只写成功的回调,不写失败的回调

图片.png

多个文件内容读取

  • 普通写法,会造成回调地狱

图片.png

  • 使用 promise 实现

图片.png

Promise.prototype.catch

  • 用来指定 Promise 对象失败的回调
  • p.catch()p.then(function(value){}, function(reason){}) 是等价的,前者可以直接指定失败的回调,后者的第二个参数表示失败的回调

图片.png