Promise及其应用

异步编程与Promise的关系

Promise的作用与用法

作用

用法

Promise应用

.then()

.catch()

async/await的作用与用法

参考资料

Promise及其应用

异步编程与Promise的关系

Promise是异步编程的一种解决方案
异步任务有两个结果时（成功或者失败）使用
规范回调的名字和顺序
方便捕获错误
避免出现回调地狱

Promise的作用与用法

作用

promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
容易理解，便于维护

用法

Promise有三种状态：

pending:进行中

fulfilled:已成功

rejected:已失败

一旦状态改变（pending->fulfilled或者pending->rejected)，就会触发then()中的响应函数。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

resolve函数改变状态pending->fulfilled

reject函数改变状态pending->rejected

Promise应用

.then()

接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
.then()返回一个新的Promise实例，所以它可以链式调用
当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null；
如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
如果返回其他任何值，则会立即执行下一级.then()

let p=new Promise((resolve,reject)=>{console.log("Promise");resolve();    //将pending状态转化为fulfilled,就可以调用.then()方法中的第一个函数
}).then(()=>{console.log('Resolved.')},
()=>{console.log('Reject.')});
console.log('Hi!');
//输出：Promise Hi! Resolved.let p1=new Promise((resolve,reject)=>{console.log("Promise");reject();    //将pending状态转化为rejected,就可以调用.then()方法中的第二个函数
}).then(()=>{console.log('Resolved.')},
()=>{console.log('Reject.')});
console.log('Hi!');
//输出：Promise Hi! Reject.

.catch()

用于指定发生错误时的回调函数。

catch()方法返回一个Promise，而它的行为与catch中的回调函数的返回值有关：

如果catch中的回调函数返回一个值或者没有返回值，那么catch返回的Promise将会成为Resolved状态，并且将返回的值作为Resolved状态的回调函数的参数值。上述代码中的c的状态就是Resolved状态。

如果catch中的回调函数抛出一个错误，那么catch返回的Promise将会成为Rejected状态，并且将抛出的错误作为Rejected状态的回调函数的参数值。

let p2=new Promise((resolve,reject)=>{console.log("Promise");reject();    //将pending状态转化为rejected,因为.then()方法中只有一个参数，故执行后面的catch()
}).then(()=>{
console.log('Resolved.');
}).catch(()=>{console.log("Error!")
})
console.log('Hi!');
//输出：Promise Hi! Error!

async/await的作用与用法

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），还可以继续给 await 的返回值使用 .then() 函数和.catch()；如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

 function s() {return new Promise((resolve, reject) => {console.log("Promise");resolve();})}async function test() {let a = await s().then(() => { console.log("ok") });console.log("a");}test();//输出：Promise ok afunction s() {return new Promise((resolve, reject) => {console.log("Promise");reject();})}async function test() {let a = await s().catch(() => { console.log("error") });console.log("a");}test();//输出：Promise error a

参考资料

【Promise与异步】理解并使用Promise_不知名网友小H的博客-CSDN博客

什么是promise？promise的作用是什么？_canoe777的博客-CSDN博客

Promise对象解析（3）catch方法

async/await 的理解和用法_前端之神的博客-CSDN博客

Promis及其应用相关推荐

vue2项目之async/await 处理 promis
async/await 处理 promis 请求函数 reqLogin(user) 返回一个 promise 对象,如果我们要获取该 promise 对象的值 PromiseResult,我们就需要用 ...
JS简单实现Promis（没有实现then链调用）
JS简单实现Promis(没有实现then链调用) // 实现Promise function _Promise(fn){// 要求接收的fn必须是一个函数,否则报错if(typeof fn !== ...
promis all allSettled
function all(results) { let result = new Array(results.length); // 存储返回结果 let counter = 0; // 计数器 re ...
promis模式的javascript实现
javascript语言是一门函数式编程的语言,回调函数的使用是常用的,特别是在异步编程时,回调函数会在异步函数完成之后调用. 但是在编程中会遇到这样一类问题,A任务完成之后才可以开始B任务,B任务 ...
ES6中的Promis的使用方法
什么是Promise? Promise是由 CommonJS 在 Promises/A 规范中提出来的,是js一部编程的重要概念,是比较就行的javascript一部变成解决方案之一. 常见的异步编程 ...
javascript的Promis对象
javascript的Promis对象背景 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.在浏览器中的大多数任务都是异步(无阻塞)执行的,例如:鼠 ...
JavaScript高级手记（简单实现Promis）
JavaScript高级手记(简单实现Promis) // 实现Promise function _Promise(fn){// 要求接收的fn必须是一个函数,否则报错if(typeof fn !== ...
Netty源码分析（六）—Future和Promis分析
Netty源码分析(六)-Future和Promis分析 Future用来在异步执行中获取提前执行的结果个人主页:tuzhenyu's page 原文地址:Netty源码分析(六)-Future和P ...
如何使用promis进行封装我们的ajax
如何使用promis进行封装我们的ajax 如何使用promis进行封装我们的ajax 如何使用promis进行封装我们的ajax 封装好的请求 function ajaxTo(request){// ...
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...

Promis及其应用

Promise及其应用

异步编程与Promise的关系

Promise的作用与用法

作用

用法

Promise应用

.then()

.catch()

async/await的作用与用法

参考资料

Promis及其应用相关推荐

最新文章

热门文章