千家信息网

javascript中的Promise怎么使用

发表于:2024-11-20 作者:千家信息网编辑
千家信息网最后更新 2024年11月20日,这篇"javascript中的Promise怎么使用"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一
千家信息网最后更新 2024年11月20日javascript中的Promise怎么使用

这篇"javascript中的Promise怎么使用"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"javascript中的Promise怎么使用"文章吧。

    一、首先,要知道为什么要用Promise语法?

    在介绍Promise之前,首先来了解一下JavaScript的特性。搞前端开发的都知道JS是一个传统的单线程编程,它里面的程序运行都是同步的,只有一个主线程,但是随着技术的发展,为了解决前期的缺陷,引入了异步思想,也就是一个异步过程的执行将不再与原有的序列有顺序关系,这就解决了同步执行引起的执行效率不高的缺陷。用一句话解释:异步就是从主线程发射一个子线程来完成任务。

    再来了解一下Promise,Promise是ES6新增加的,它是一个由ES6提供的类,其主要目的就是很好的处理复杂的异步任务,但是它不是任何浏览器都能支持,比如一些旧版本的浏览器就不支持,只有苹果的Safari10和Windows的Edge14版本以上浏览器才开始支持ES6特性的。

    Promise作为替代回调函数执行,作为异步操作的处理方法;是JS异步执行时候,回调函数嵌套回调函数的这一问题的解决方法,Promise更简洁地控制函数执行流程。Promise对象其实表示是一个异步操作的最终成败,以及结果值,也就是一个代理值,是ES6中的一种异步回调解决方案。

    Promise对象代理的值其实是未知的,状态是动态可变的,因此Promise对象的状态有三种:进行中、结束、失败,它运行的时候,只能从进行中到失败,或者是从进行中到成功。使用Promise对象只要是通过同步的表达形式来运行异步代码。

    • pending:初始状态,既不成功,也不失败;

    • fulfilled:操作成功结束;

    • rejected:操作失败。

    怎么构造Promise?这里简单举一个构造Promise的示例:

    new Promise(function (resolve, reject) {   // 要做的事情...});

    通过上面新构造一个Promise 对象好像并没有看出它是怎样很好的处理复杂的异步任务的,那么接下来就是Promise的核心操作。

    二、接着,来了解一下回调地狱(Callback Hell)

    回调地狱也叫回调嵌套或者函数混乱的调用,通俗点讲就是:需要发送三个网络请求,第三个请求依赖第二个请求的结果,第二个请求依赖第一个请求的结果。不断增加的嵌套使用。

    回调函数的弊病:

    开发者阅读起来很费神、吃力,不利于排查错误,更不能直接return,等等。如:

    setTimeout(() => {console.log(1)setTimeout(() => {console.log(2)setTimeout(() => {console.log(3)},3000)},2000)},1000)

    三、最后,也是本章的重头戏,Promise的基本使用

    Promise 构造函数只有一个参数,是一个函数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数。起始函数,也就是Promise的构造函数里面有两个参数:resolve和reject,该两个参数表示的是异步操作的结果,也就是Promise成功或失败的状态。

    当 Promise 被构造时,起始函数会被异步执行;resolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的。

    • ①异步操作成功,调用resolve函数,将Promise对象的状态改为fulfilled。

    • ②异步操作失败,调用rejected函数,将Promise对象的状态改为rejected。

    举一个使用例子,比较规范的写法是把Promise封装到一个函数里然后同时返回一个Promise,如下所示:

    const delay = (millisecond) => {return new Promise((resolve, reject)=>{if (typeof millisecond != 'number') reject(new Error('必须是number类型'));setTimeout(()=> {resolve(`延迟${millisecond}毫秒后输出`)}, millisecond)})}

    上述例子可以看到Promise有两个参数:resolve和reject。resolve:将异步的执行从pending(请求)变成了resolve(成功返回),是个函数执行返回;reject:见名知意为"拒绝",从请求变成了"失败",是函数可以执行返回的一个失败结果,推荐返回一个错误new Error(),这样做更加清晰明了,更加规范。

    (一) resolve函数

    若传入的是非Promise,基本数据类型的数据,则返回成功的Promise;若传入的是Promise,则该对象的结果就决定了resolve的返回结果值。

    let obj =new Promise((resolve,reject)=>{resolve('yes');});//1.若传入的是非Promise,基本数据类型的数据,则返回成功的Promise。let p1= Promise.resolve('123')//2.若传入的是Promise,则该对象的结果就决定了resolve的返回结果值。let p2 = Promise.resolve(obj);//3.嵌套使用let p3 = Promise.resolve(Promise.resolve(Promise.resolve('abc')));console.log(p3);

    (二) rejected函数

    Promise.prototype.reject,始终返回的是失败的Promise

    let p = Promise.reject(123123);let p2 = Promise.reject('abc');let p3 = Promise.reject(Promise.resolve('ok'));console.log(p3);

    (三)Promise的API

    Promise的API里面常用的几个方法有:then、catch、finally、all、race等,具体的使用方法下面一一道来。

    1. then

    then指定成功或失败的回调到当前的Promise。then里面拿到的Promise resolve里面的数据,并返回一个Promise继续提供使用;then方法返回的结果由then指定回调函数决定。

    实例如下所示:

    let p=new Promise((resolve,reject)=>{resolve('yes')})p.then(value=>{console.log(value) //这里的value就是上面的yes},reason=>{console.error(reason)})
    2. catch

    catch指定失败的回调,返回的是失败的结果。

    实例如下所示:

    let p =new Promise((resolve,reject)=>{reject('失败!');})p.then(value=>{},reason=>{console.error(reason);})p.catch(reason=>{console.error(reason)})
    3. finally

    finally用来进行收尾工作,无论Promise的状态成功和失败与否,当执行完回调函数之后,都会去finally寻找最后的回调函数来执行。

    实例如下所示:

    request.finally(function(){// 最后,而且一定会执行的代码})
    4. Promise.all

    在多个Promise任务一起执行的时候,若全部成功,则返回一个新的Promise,若其中有一个失败,则返回失败的Promise对象。

    实例如下所示:

    let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('yes');}, 1000);});let p2 = Promise.resolve('ok');let p3 = Promise.reject('Oh no');//所有的let result = Promise.all([p1, p2, p3]);console.log(result);
    5. Promise.race

    在多个Promise任务同步执行的时候,返回最先结束的Promise任务结果,无论最后是成功还是失败,通俗点将:先到先得。

    实例如下所示:

    let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('yes');}, 1000);});let p2 = new Promise((resolve, reject) => {setTimeout(() => {resolve('ok');}, 500);});let result = Promise.race([p1, p2]);console.log(result); //p2 ok

    以上就是关于"javascript中的Promise怎么使用"这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。

    0