资讯专栏INFORMATION COLUMN

异步发展流程 —— Promise 的基本使用

venmos / 2851人阅读

摘要:阅读原文简介是的新特性,提供了对异步编程控制的新的解决方案,在过去书写异步代码时要靠回调函数,当异步操作依赖于其他异步操作的返回值时,会出现一种现象,被程序员们称为回调地狱,即多层回调函数嵌套,这种代码的可读性维护性都很差,因此诞生了,当然


阅读原文


Promise 简介

Promise 是 ES6 的新特性,提供了对 js 异步编程控制的新的解决方案,在过去书写异步代码时要靠回调函数,当异步操作依赖于其他异步操作的返回值时,会出现一种现象,被程序员们称为 “回调地狱”,即多层回调函数嵌套,这种代码的可读性、维护性都很差,因此诞生了 Promise,当然 Promise 并不是完全摆脱回调,而只是改变了传递回调的位置,大大减少了回调函数嵌套。


Promise 的使用 1、实例方法 then

Promise 中的代码默认是同步执行的,then 方法中的回调在微任务队列中执行,在 Promise 的 then 方法中支持传入两个参数,一个是成功的回调,一个是失败的回调,在 Promise 中调用了 resolve 方法,就会在 then 中执行成功的回调,调用了 reject 方法,就会在 then 中执行失败的回调,成功的回调和失败的回调只能执行一个,resolvereject 方法调用时传入的参数会传递给 then 方法中对应的回调函数。

// 执行 resolve
let p = new Promise((resolve, reject) => {
    console.log(1);
    resovle(3);
});

console.log(2);

p.then(data => {
    console.log(data);
}, err => {
    console.log(err);
});

// 1
// 2
// 3
// 执行 reject
let p = new Promise((resolve, reject) => {
    reject();
});

p.then(() => {
    console.log(1);
}, () => {
    console.log(2);
});

// 2

如果 Promise 中发生错误,就会在 then 中执行失败的回调。

// 失败的回调
let p = new Primise((resolve, reject) => {
    throw new Error();
});

p.then(() => {
    console.log(1);
}, () => {
    console.log("报错啦");
});

// 报错啦

当同一个 Promise 实例的 then 方法多次调用时,就会多次执行。

// 多次调用 then
let p = new Promise((resolve, reject) => {
    resolve("成功");
});

p.then(data => {
    console.log(data);
});

p.then(data => {
    console.log(data);
});

// 成功
// 成功
2、Promise 的链式调用

Promise 支持链式调用,每次调用一次 then 方法都会返回一个新的 Promise实例,如果该 then 方法中执行的回调函数有返回值,并且这个返回值会作为返回的下一个 Promise 实例的 then 方法回调的参数,如果 then 方法的返回值是一个 Promise 实例,那就返回一个新的 Promise 实例,将 then 返回的 Promise 实例执行后的结果作为返回 Promise 实例回调的参数。

// 链式调用 then
function read(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, "utf8", (err, data) => {
            if (err) reject(err);
            resolve(data);
        })
    });
}

read("1.txt").then(data => {
    // 假设此时读到的内容为 Hello world
    return data;
}, err => {
    console.log(err);
}).then(data => {
    console.log(data);
    // Hello world
}, err => {
    console.log(err);
});

read("1.txt").then(data => {
    // 假如此时读到的 1.txt 的内容为 2.txt 的字符串,2.txt 的内容为 Hello world
    return read(data);
}, err => {
    console.log(err);
}).then(data => {
    console.log(data);
    // Hello world
}, err => {
    console.log(err);
});

在 Promise 实例的 then 中如果有错误产生,在返回的新的 Promise 实例中的 then 方法中会执行错误的回调。

// 链式调用 then 出错
let p = new Promise((resolve, reject) => {
    resolve();
});

p.then(() => {
    console.log("success", 1);
    throw new Error();
}, () => {
    console.log("error", 1);
}).then(() => {
    console.log("success", 2);
}, () => {
    console.log("error", 2)
})

// success 1
// error 2

在 Promise 中有三个状态:

pending:等待态

fulfilled:成功态

rejected:失败态

Promise 实例的状态只能从 pendingfulfilled 或从 pendingrejected,状态一旦发生变化就不可逆,所以 Promise 实现链式调用与 jQuery 不同,返回的不是 this,只能是一个新的 Promise。

3、实例方法 catch

在 Promise 中实例的 catch 方法可以捕获链式调用中的异常,不需要每次调用 then 方法中都传入错误的回调,在链式调用的过程中只要有任何一个 then 中出现错误,都会被 catch 方法捕获到。

// catch 方法
let p = new Promise((resolve, reject) => {
    resolve();
});

p.then(() => {
    throw new Error();
    console.log("success", 1);
}).then(() => {
    console.log("success", 2);
}).catch(() => {
    console.log("出错了");
});

// 出错了

p.then(() => {
    console.log("success", 1);
}).then(() => {
    throw new Error();
    console.log("success", 2);
}).catch(() => {
    console.log("出错了");
});

// success 1
// 出错了
4、静态方法 Promise.all

Promise 中的静态方法 all 可以实现多个 Promise 实例的并行,当所有结果都为成功时,返回一个数组,该数组存储的为每一个 Promise 实例的返回结果,每一个 Promise 实例的返回顺序先后不固定,但是返回值的数组内存储每一个 Promise 的返回值的结果按照最初传入的顺序排列,all 方法的返回值为一个新的 Promise 实例,返回的数组作为返回新 Promise 的 then 方法成功回调的参数。

all 传入的参数数组中的 Promise 实例执行时,只要有一个失败,则直接返回该 Promise 实例失败的结果或错误信息。

// Promise.all 方法
let p1 = new Promise((resolve, reject) => {
    resolve(1);
});

let p2 = new Promise((resolve, reject) => {
    resolve(2);
});

Promise.all([p1, p2]).then(data => {
    console.log(data);
});

// [1, 2]
// Promise.all 错误捕获
let p1 = new Promise((resolve, reject) => {
    resolve(1);
});

let p2 = new Promise((resolve, reject) => {
    reject(2);
});

Promise.all([p1, p2]).then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);
});

// 2
5、静态方法 Promise.race

Promise 的静态方法 race 的用法和 all 类似,参数同为一个存储 Promise 实例的数组,返回值同样是一个新的 Promise 的实例,不同的是,数组中的 Promise 实例只有一个结果为成功,那就直接返回这个结果(只取出最快返回的结果),在没有成功的结果之前有一个出错,就直接返回这个错误。

// Promise.race 方法
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 2000);
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), 1000);

});

Promise.race([p1, p2]).then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);
});

// 2
// Promise.race 错误捕获
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => reject(1), 1000);
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve(2), 2000);

});

Promise.race([p1, p2]).then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);
});

// 1
6、静态方法 Promise.resolve

Promise 的静态方法 resolve 可以直接将 Promise 的状态变为成功并返回一个新的 Promise 实例,resolve 的参数会传递给返回的新 Promise 实例 then 中成功回调。

// Promise.resolve 方法
Promise.resolve("hello").then(data => {
    console.log(data);
});

// hello
7、静态方法 Promise.reject

Promise 的静态方法 rejectresolve 使用完全相同,都返回一个新的 Promise 实例,不同的是 reject 的参数会传递给新 Promise 实例的 then 方法失败回调。

// Promise.reject 方法
Promise.reject("出错了").then(null, err => {
    console.log(err);
});

// 出错了

当成功的回调不传递时,可以使用 null 代替,因为 null 作为参数会被忽略掉,将参数穿透到下一个 then 的回调中。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98282.html

相关文章

  • 异步发展流程 —— 异步编程终极大招 async/await

    摘要:简介指的是两个关键字,是引入的新标准,关键字用于声明函数,关键字用来等待异步必须是操作,说白了就是的语法糖。最后希望大家在读过异步发展流程这个系列之后,对异步已经有了较深的认识,并可以在不同情况下游刃有余的使用这些处理异步的编程手段。 showImg(https://segmentfault.com/img/remote/1460000018998406?w=1024&h=379); ...

    zhangfaliang 评论0 收藏0
  • 异步发展流程 —— Generators + co 让异步更优雅

    摘要:遍历器原有的表示集合的数据结构,主要有和,在中又加入了和,这样就有了四种数据集合,还可以组合使用它们,如数组的成员是或,这样就需要一种统一的接口机制,用来处理所有不同的数据结构。 showImg(https://segmentfault.com/img/remote/1460000018998438?w=900&h=431); 阅读原文 Generators 简介 Generato...

    dingda 评论0 收藏0
  • Promise学习:基础入门

    摘要:今天来学习下吧其实这在笔试上也是一个考点基本介绍对象是熟悉的名字吧工作组提出的规范原本只是社区提出的构想一些外部函数库率先实现了该功能中将其写入了语言标准目的为异步操作提供统一接口是啥它就是一个中一个对象起着代理作用充当异步操作与回调函 今天来学习下Promise吧,其实这在笔试上也是一个考点. 基本介绍 Promise对象是CommonJS(熟悉的名字吧- -)工作组提出的规范.Pr...

    iamyoung001 评论0 收藏0
  • 异步发展流程 —— 手写一个符合 Promise/A+ 规范 Promise

    摘要:构造函数的实现我们在使用的时候其实是使用关键字创建了一个的实例,其实是一个类,即构造函数,下面来实现构造函数。 showImg(https://segmentfault.com/img/remote/1460000018998456); 阅读原文 概述 Promise 是 js 异步编程的一种解决方案,避免了 回调地狱 给编程带来的麻烦,在 ES6 中成为了标准,这篇文章重点不是叙...

    UnixAgain 评论0 收藏0
  • JavaScript 异步

    摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归 问题描述 在开发过程中,遇到一个需求:在系统初始化时通过http获取一个第三方服务器端的列表,第三方服务器提供了一个接口,可通过...

    tuniutech 评论0 收藏0

发表评论

0条评论

venmos

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<