iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的Promise详解
  • 431
分享到

JavaScript中的Promise详解

2024-04-02 19:04:59 431人浏览 独家记忆
摘要

目录Promise的基本用法:1、创建Promise对象2、Promise 方法总结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 方法只需写一次即可

总结

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

--结束END--

本文标题: JavaScript中的Promise详解

本文链接: https://www.lsjlt.com/news/155299.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中的Promise详解
    目录Promise的基本用法:1、创建Promise对象2、Promise 方法总结Promise是异步编程的一种解决方案,是一个对象,可以获取异步操作的消息,大大改善了异步编程的困...
    99+
    2024-04-02
  • javascript中Promise使用详解
    目录一、首先,要知道为什么要用Promise语法?二、接着,来了解一下回调地狱(Callback Hell)三、最后,也是本章的重头戏,Promise的基本使用(一) resolve...
    99+
    2024-04-02
  • JavaScript中Promise的执行顺序详解
    目录前言代码分析then 方法何时调用?总结前言 最近看到一个 Promise 相关的很有意思的代码: new Promise((resolve) => { console...
    99+
    2024-04-02
  • 详解JavaScript中Promise类的使用方法
    目录1. all 2.  allSettled3.  race4. any 这篇主要讲一下Promise的类方法的基本使用...
    99+
    2023-05-19
    JavaScript Promise类使用 JavaScript Promise类
  • 详解JavaScript Promise和Async/Await
    目录概述四个示例示例1:用生日解释Promise基础知识示例2:一个猜数字的游戏示例3:从Web API中获取国家信息示例4:从Web API中获取一个国家的周边国家列表总结概述 一...
    99+
    2024-04-02
  • javascript中的糖衣语法Promise对象详解
    目录一、Promise的诞生1、回调地狱二、Promise的行为1、Promise的语法2、Promise的方法(1)Promise.prototype.then()(2)Promi...
    99+
    2024-04-02
  • JavaScript实现Promise流程详解
    目录构造函数then 和 catch方法解决异步问题all和race方法构造函数 首先我们来看一下我们是如何使用promise的,我们在实例化对象是这么使用的: let p1...
    99+
    2024-04-02
  • 如何理解JavaScript中的Promise
    如何理解JavaScript中的Promise,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。pr...
    99+
    2024-04-02
  • Javascript的promise,async和await的区别详解
    终于把promise, async, await的区别和联系弄清楚了,看下面代码 写法1,2是promise的写法 写法6是async和await的写法 主要看第2种写法和第6中写法...
    99+
    2024-04-02
  • JavaScript中Promise的简单使用及其原理详解
    Promise是ES6最重要的特性之一,今天来系统且细致的研究一下Promise的用法以及原理。 按照我往常的理解,Promise是一个构造函数,有all、resolve、rejec...
    99+
    2023-03-23
    JavaScript Promise原理 JavaScript Promise使用 JavaScript Promise
  • 万字详解JavaScript手写一个Promise
    目录前言Promise核心原理实现Promise的使用分析MyPromise的实现在Promise中加入异步操作实现then方法的多次调用实现then的链式调用then方法链式调用识...
    99+
    2024-04-02
  • JavsScript中Promise的错误捕获详解
    目录我们需要在异步任务中准确的进行错误捕获,以便我们可以知道错误出在什么地方我们再讨论then方法中的第二个参数和Promise.catch方法的区别题: then方法的连续调用,怎...
    99+
    2024-04-02
  • JavaScript异步编程之Promise的初步使用详解
    1. 概述 Promise对象是ES6提出的的异步编程的规范。说到异步编程,就不得不说说同步和异步这两个概念。 从字面意思理解同步编程的话,似乎指的是两个任务同步运行,如果这样理解就...
    99+
    2024-04-02
  • 深入学习JavaScript中的promise
    目录为什么要用Promise?使用Promise解决异步控制问题Promise的结构回调函数为什么异步代码一定是回调函数结构?刨析Promise原型方法——c...
    99+
    2024-04-02
  • JavaScript中Promise怎么用
    这篇文章主要为大家展示了“JavaScript中Promise怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中Promise怎么用”这...
    99+
    2024-04-02
  • JavaScript中的Promise如何使用
    这篇文章主要介绍了JavaScript中的Promise如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript中的Promise如何使用文章都会有所收获,下面我们一起来看看吧。Promise...
    99+
    2023-06-30
  • ES6的Promise用法详解
    目录什么是Promisereject的用法catch的用法all的用法race的用法什么是Promise Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有al...
    99+
    2024-04-02
  • javascript中的Promise怎么使用
    这篇“javascript中的Promise怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript中的P...
    99+
    2023-06-30
  • JavaScript中Promise如何使用
    JavaScript中Promise如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1.什么是 Promisepromise 是目前...
    99+
    2024-04-02
  • javascript中Promise原理是什么
    本篇内容主要讲解“javascript中Promise原理是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript中Promise原理是什么”吧...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作