本文概述
- 回调
- 为什么需要Promise?
- Promise如何工作?
- Promise
- Promise方法
- ES6 promise链
ES6 Promise是使用JavaScript进行异步编程的最简单方法。异步编程包括从主线程单独运行进程, 并在完成后通知主线程。在” Promise” 之前, “ 回调” 用于执行异步编程。
回调回调是在另一个函数执行完成之后处理函数执行的一种方法。
回调将有助于处理事件。在回调中, 一个函数可以作为参数传递给另一个函数。
为什么需要Promise?当处理基本情况(例如最少的异步操作)时, 回调是一种很好的方法。但是, 当你开发具有大量代码的Web应用程序时, 使用Callback会很麻烦。这种过多的回调嵌套通常称为” 回调地狱” 。
为了处理这种情况, 我们必须使用Promises而不是Callbacks。
Promise如何工作?Promise表示异步操作的完成。它基于被拒绝或解决的操作返回单个值。 Promise主要分为三个阶段, 如下所示:
文章图片
待定-这是每个Promise的初始状态。它表示结果尚未计算。
已完成-表示操作已完成。
已拒绝-表示在计算过程中发生的故障。
一旦实现或拒绝了Promise, 它就不会改变。 Promise()构造函数接受两个参数, 分别为拒绝函数和解析函数。基于异步操作, 它返回第一个参数或第二个参数。
Promise在JavaScript中, 我们可以使用Promise()构造函数创建Promise。
语法
const Promise = new Promise((resolve, reject) => {....});
例子
let Promise = new Promise((resolve, reject)=>{
let a = 3;
if(a==3){
resolve('Success');
}
else{
reject('Failed');
}
})
Promise.then((message)=>{
console.log("It is then block. The message is: ?+ message)
}).catch((message)=>{
console.log("It is Catch block. The message is: ?+ message)
})
输出如下
It is then block. The message is: Success
Promise方法Promise方法用于处理Promise对象的拒绝或解析。让我们了解Promise方法的简短描述。
.then()
当实现或拒绝Promise时, 将调用此方法。可以将这种方法链接起来, 以处理对Promise的拒绝或履行。它需要两个功能性参数来解决和拒绝。第一个在Promise履行时被调用, 第二个(可选)在Promise被拒绝时被调用。
让我们通过下面的示例理解如何使用.then()方法处理Promise拒绝和解决方案。
例子
let success = (a) => {
console.log(a + " it worked!")
}let error = (a) => {
console.log(a + " it failed!")
}const Promise = num => {
return new Promise((resolve, reject) => {
if((num%2)==0){
resolve("Success!")
}
reject("Failure!")
})
}Promise(100).then(success, error)
Promise(21).then(success, error)
输出如下
Success! it worked!
Failure! it failed!
.catch()
这是处理失败和拒绝的好方法。它仅需要一个函数参数来处理错误。
让我们通过以下示例来理解如何使用.catch()方法处理Promise拒绝和失败。
例子
const Promise = num => {
return new Promise((resolve, reject) => {
if(num > 0){
resolve("Success!")
}
reject("Failure!")
})
}Promise(20).then(res => {
throw new Error();
console.log(res + " success!")
}).catch(error => {
console.log(error + " oh no, it failed!")
})
输出如下
Error oh no, it failed!
.resolve()
它返回一个新的Promise对象, 并使用给定的值对其进行解析。如果该值具有.then()方法, 则返回的Promise将遵循.then()方法采用其最终状态的情况;否则, 返回的Promise将实现价值。
Promise.resolve('Success').then(function(val) {
console.log(val);
}, function(val) {
});
.reject()
它返回具有给定值的拒绝的Promise对象。
例子
function resolved(result) {
console.log('Resolved');
}function rejected(result) {
console.error(result);
}Promise.reject(new Error('fail')).then(resolved, rejected);
输出如下
Error: fail
.all()
它以Promises数组作为参数。此方法返回一个已解析的Promise, 当所有作为迭代对象传递的Promise都已实现时, 该Promise就会实现。
例子
const PromiseA = Promise.resolve('Hello');
const PromiseB = 'World';
const PromiseC = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 1000);
});
Promise.all([PromiseA, PromiseB, PromiseC]).then(function(values) {
console.log(values);
});
输出如下
[ 'Hello', 'World', 1000 ]
.race()
此方法用于基于第一个引用的可解决的Promise返回已解决的Promise。
例子
const Promise1 = new Promise((resolve, reject) => {
setTimeout(resolve("Promise 1 is first"), 1000)
})const Promise2= new Promise((resolve, reject) =>{
setTimeout(resolve("Promise 2 is first"), 2000)
})Promise.race([Promise1, Promise2]).then(result => {
console.log(result);
})
输出如下
Promise 1 is first
ES6 promise链Promise链使我们能够控制JavaScript异步操作的流程。通过使用Promise链接, 我们可以将Promise的返回值用作另一个异步操作的输入。
文章图片
有时, 希望将Promises链接在一起。例如, 假设我们有几个异步操作要执行。当一个操作为我们提供数据时, 我们将开始对该数据块执行另一操作, 依此类推。
当我们有多个相互依赖的异步函数, 并且每个函数都应该一个接一个地运行时, Promise链会很有用。
让我们尝试通过使用以下示例来理解Promise链接的概念:
例子
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
meta name="viewport" content="width=device-width, initial-scale=1.0">
<
meta http-equiv="X-UA-Compatible" content="ie=edge"><
title>Document<
/title>
<
/head>
<
body>
<
script>
const PromiseA = () =>{
return new Promise((resolve, reject)=>{
resolve("Hello Promoise A");
});
}
const PromiseB = () =>{
return new Promise((resolve, reject)=>{
resolve("Hello Promise B");
});
}const PromiseC = () =>{
return new Promise((resolve, reject)=>{
resolve("Hello Promise C");
});
}
PromiseA().then((A)=>{
console.log(A);
return PromiseB();
}).then((B)=>{
console.log(B);
return PromiseC();
}).then((C)=>{
console.log(C);
});
<
/script>
<
/body>
<
/html>
在浏览器中执行以上代码, 并使用ctrl + shift + I打开终端。成功执行以上代码后, 我们将获得以下输出。
【ES6 Promise介绍和用法示例】输出如下
文章图片
推荐阅读
- ES6 rest参数用法解释
- ES6页面重定向
- ES6页面打印
- Android 切换横竖屏
- App地推业绩统计方法选择不当会产生什么问题()
- adjustsFontSizeToFitWidth 与NSLineBreakByCharWrapping 无法共用
- Could not find com.android.tools.build:gradle:2.2.3
- Dapper操作Sql Server和MySql数据库
- Android-SDK目录结构