JavaScript中的Promise详解

目录
  • Promise的基本用法:
    • 1、创建Promise对象
    • 2、Promise 方法
  • 总结

Promise是异步编程的一种解决方案,是一个对象,可以获取异步操作的消息,大大改善了异步编程的困难,避免了回调地狱,比传统的解决方案回调函数和事件更合理和更强大。

从语法上讲,Promise是一个对象,它可以获取异步操作的消息。提供了一个统一的API,各种异步操作都可以用同样的方法进行处理

1、Promise的实例有三个状态:

(1)Pending(进行中)

(2)Resolved(已完成)

(3)Rejected (已拒绝)

2、Promise的实例有两个过程

(1)pending > fulfiled :Resolved

(2)pending > rejected :Rejected

注意:一旦从进销项状态变为其他状态就永远不能更改状态了

Promise的基本用法:

1、创建Promise对象

Promise 对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)

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

2、Promise 方法

Promise有五个常用方法:

(1)then()

then 方法可以接收两个回调函数作为参数,第一个回调函数是Promise对象的状态改变为 resoved 是调用,第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
 })

(2)catch()

该方法相当于 then 方法的第二个参数,指向 reject 的回调函数。

另一个作用是,在执行resolve回调函数时,如果出错,抛出异常,不会停止陨星,而是进入catch 方法中。

p.then((data) => {
     console.log('resolved',data);
},(err) => {
     console.log('rejected',err);
     }
);
p.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});

(3)all()

all 方法可以完成并进行任务,它接收的是一个数组,数组的每一项都是 Promise 对象。当数组中所有的 Promise 状态都达到 resolved 的时候,all 方法的状态就会变成 resolved,如果有一个状态变成了 rejected。那么all 方法的状态就会变成rejected。

javascript
let promise1 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(1);
	},2000)
});
let promise2 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(2);
	},1000)
});
let promise3 = new Promise((resolve,reject)=>{
	setTimeout(()=>{
       resolve(3);
	},3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //结果为:[1,2,3]
})

(4)rece()

rece 方法和 all 一样,接收的参数是一个每项都是 Promise 的数组,但是与 all 不同的是,当最先执行完的事件执行完之后,就直接返回该 promise 对象的值

rece的实际作用:当要做一件事,超过长时间就不做了,可以用这个方法来解决。

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})

(5)finally()

finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。(该方法是ES2018中引入标准的)

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

finally 方法的回调函数不接受任何参数,这意味着没有办法知道前面的 Promise 状态到底是 fulfilled 还是 rejected

promise
.finally(() => {
  // 语句
});
// 等同于
promise
.then(
  result => {
    // 语句
    return result;
  },
  error => {
    // 语句
    throw error;
  }
);

在上面代码中,如果不写 finally 方法,同样的语句需要为成功和失败两种情况各写一次。有了 finally 方法只需写一次即可

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

(0)

相关推荐

  • 前端JavaScript之Promise

    目录 1.什么是Promise 2.基本用法 3.Promise的方法 3.1 Promise.prototype.then() 3.2 Promise.prototype.catch() 3.3 Promise.prototype.finally() 3.4 Promise.all() 3.5 Promise.race() 3.6 Promise.allSettled() 3.7 Promise.any() 3.8 Promise.resolve() 3.9 Promise.reject()

  • JS 9个Promise面试题

    1. 多个.catch var p = new Promise((resolve, reject) => { reject(Error('The Fails!')) }) p.catch(error => console.log(error.message)) p.catch(error => console.log(error.message)) 以上代码的输出将会是什么?请选择正确的答案: [ ] 打印一次消息 [x] 打印两次消息 [ ]UnhandledPromiseReject

  • JS如何为promise增加abort功能

    目录 概述 promise race方法 重新包装promise AbortController  Axios插件自带取消功能 概述 Promise只有三种状态:pending.resolve.reject,一个异步的承诺一旦发出,经历等待(pending)后,最终只能为成功或者失败,中途无法取消(abort). 为promise提供abort功能的思路有两种: 手动实现abort,触发取消后,异步回来的数据直接丢弃(手动实现,比较稳妥) 使用原生方法AbortController中断请求(实验

  • 彻底搞懂 javascript的Promise

    目录 一.为什么要引入Promise? Promise解决了什么问题? Promise有哪些具体的使用场景? 二.手写Prromise身上的方法 手写Promise.all 手写Promise.race 手写Promise.finally Promise.all和Promise.race的区别 Promise.all和Promise.race的应用场景 promise.all()的应用场景 Promise.race()的应用场景 三.Promise是如何解决串行和并行的? 什么是并行?什么是串行

  • 深入了解JavaScript Promise

    目录 一 什么是 Promise? 二 为什么有 Promise? 三 Promise常用api 四 Promise常用的两个用法 总结 一 什么是 Promise? 一个 Promise 对象就像容器一样,在容器中写着一段执行具体操作的代码,并且在这段代码执行结束后,会执行两个回调函数,一个是操作成功的回调函数(resolve),一个是操作失败的回调函数(reject) 二 为什么有 Promise? Promise 的出现是为了解决异步编程中,主要使用的回调机制的几个问题: Callback

  • JavaScript中的Promise详解

    目录 Promise的基本用法: 1.创建Promise对象 2.Promise 方法 总结 Promise是异步编程的一种解决方案,是一个对象,可以获取异步操作的消息,大大改善了异步编程的困难,避免了回调地狱,比传统的解决方案回调函数和事件更合理和更强大. 从语法上讲,Promise是一个对象,它可以获取异步操作的消息.提供了一个统一的API,各种异步操作都可以用同样的方法进行处理 1.Promise的实例有三个状态: (1)Pending(进行中) (2)Resolved(已完成) (3)R

  • javascript中正则表达式语法详解

    好久都没有写博客了,主要是太懒了,尤其是在阳春三月,风和日丽的日子,太阳暖暖的照在身上,真想美美的睡上一觉.就导致了这篇博客拖到现在才开始动笔,javascript的正则这一块也不是什么新的东西,主要是以前本人一遇到写正则的需求就开始头大,头疼,网上剽窃,东拼西凑,反正就是各种不适应,所以我打算系统的把正则表达式看一遍,一来是自己有所提升,这一块知识点的查漏补缺,二来是给大家分享一下.好了,下面我们直接进入主题: 正则是匹配字符串特定模式的一种表达式,官方是这样说的,但我的理解不外乎就是匹配字符

  • javascript中clone对象详解

    开发中,打断对象间的引用关系,只想下个副本的情况无处不在,clone一个对象就在所难免了. JavaScript中,简单的方法就是用JSON函数,将对象stringify成字符串,再parse成一个新对象.要么就是从网上搜个代码,开源社区里面clone的代码还是有不少的. 代码虽然可以找得到,但,东西永远是别人的,动手学着码永远是个不变的主题. 自己写了两个克隆的函数: cloneOwn:克隆自定义对象的自有属性,不包括继承的属性,属性可以是基本数据类型和数组,自定义的对象,可以制定要克隆的属性

  • JavaScript中闭包的详解

    闭包是什么 在 JavaScript 中,闭包是一个让人很难弄懂的概念.ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量. 是不是看完这个定义感觉更加懵逼了?别急,我们来分析一下. 闭包是一个函数 闭包可以使用在它外面定义的变量 闭包存在定义该变量的作用域中 好像有点清晰了,但是使用在它外面定义的变量是什么意思,我们先来看看变量作用域. 变量作用域 变量可分为全局变量和局部变量.全局变量的作用域就是全局性的,在 js

  • 比较全面的C 、Java、JavaScript中的正则表达式详解

    什么是正则表达式? 正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗 * 浩":那么"罗 * 浩"就是公式,也称作 模式(Pattern) ,这篇文章就是 要匹配的串( 或叫文本 text) .再如,你要检查输入的一个字符串是否是 126 邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开

  • javascript中new关键字详解

    和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承. 接下来,本文将带你一起来探索JS中new的奥秘... function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = function(){ conso

  • javascript中this关键字详解

    不管学习什么知识,习惯于把自己所学习的知识列成一个list,会有助于我们理清思路,是一个很好的学习方法.强烈推荐. 以下篇幅有点长,希望读者耐心阅读. 以下内容会分为如下部分: 1.涵义 1.1:this涵义 1.2:this指向的可变性 2.使用场合 2.1:全局环境 2.2:构造函数 2.3:对象的方法 3.使用注意点 3.1:避免多层嵌套this 3.2:避免数组处理方法中的this 3.3:避免回调函数中的this 1.涵义 1.1:this涵义 在我写的一篇关于 构造函数与new关键字

  • javascript中闭包(Closure)详解

    在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中. var fun = function(){ console.log("平底斜"); } function fun(){ var n=10; function son(){ n++; } son(); console.log(n); } fun(); //11 fun(); //11 我们把上面第二段代码稍微修改下: var n=10; function fun(){ function son(){

  • Javascript中的 “&” 和 “|” 详解

    一.前言: 在文章开始之前,先出几个题目给大家看看: var num1 = 1 & 0; console.log(num1); // 0 var num2 = 'string' & 1; console.log(num2); // 0 var num3 = true & 1; console.log(num3); // 1 var num4 = undefined | false; console.log(num4); // 0 var num5 = undefined | tru

  • javascript中this指向详解

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(例

随机推荐