【Promise】一文带你了解promise并解决回调地狱

这篇具有很好参考价值的文章主要介绍了【Promise】一文带你了解promise并解决回调地狱。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Promise

为什么需要promise

需求

通过ajax请求id,再根据id请求用户名,再根据用户名获取email

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <script>
        //通过ajax请求拿到用户id
        $.ajax({
            type:"GET",
            url:"./data1.json",
            success:function(res){
                let {id} = res;
                console.log(id);

                //通过用户id找到用户名
                $.ajax({
                    type:"get",
                    url:'./data2.json',
                    data:{id},
                    success:function(res){
                        let {username} = res;
                        console.log(username);

                        //通过用户名找到用户邮箱
                        $.ajax({
                            type:"GET",
                            url:"./data3.json",
                            data:{username},
                            success:function(res){
                                let {email} = res;
                                console.log(email);
                            }
                        })
                    }
                })
            }
        })
    </script>
</body>
</html>

回调地狱

在回调函数中嵌套回调
在上述代码中通过不断请求数据,代码逐级向外递归,形成了回调地狱。
使用promise就可以完美解决,并且让我们的代码更加美观。

Promise的基本使用

Promise是一个构造函数,通过new关键字实例化对象.
语法:

new promise((reso1ve,reject)=>{})

Promise接受一个函数作为参数
在参数函数中接受两个参数

  • resolve:
  • reject:

promise实例

promise实例有两个属性:

  • state:状态
  • result:结果
    promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

promise的状态

  1. pending(准备,待解决,进行中)
  2. fulfilled(已完成,成功)
  3. rejected(已拒绝,失败)

promise状态的改变

通过调用resolve和reject改变当前promise对象的状态。

  • 改为fulfilled
let p = new Promise((resolve,reject)=>{
	resolve(); //调用resolve将状态改为fulfilled
	});
console.log(p)

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

  • 改为rejected
let p = new Promise((resolve,reject)=>{
     reject();//调用reject将状态改为rejected
   	 });
console.log(p)

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

注意:promise状态的改变是一次性的,即不能同时调用resolve和reject,若同时调用则状态只改变一次。

promise的结果

promise的结果是通过传递resolve/reject的参数来获得的

let p = new Promise((resolve,reject)=>{
         resolve("成功")
     })
console.log(p);

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

同理,reject也是如此:

promise方法

then方法

then方法中有两个参数,且都为函数作为参数。
如:

let p = new Promise((resolve,reject)=>{
    resolve("成功")
    })
p.then(()=>{
    console.log('成功时执行');
},()=>{
    console.log("失败时执行");
})
console.log(p);
  • 第一个函数参数
    当promise的状态为fulfilled时,执行该函数
  • 第二个函数参数
    当promise的状态为rejected时,执行该函数

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

通过then方法获取promise的结果

通过then方法中的函数传递形参即可获得promise的结果;

let p = new Promise((resolve,reject)=>{
    resolve("成功")
})
p.then((value)=>{
    console.log('成功时执行',value);
},(reason)=>{
    console.log("失败时执行",reason);
})
console.log(p);

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

总结:promise的状态用来判断then方法执行成功或是失败的函数,promise的结果则是作为实参传递给then方法的函数参数的形参。

then方法的返回值

then方法返回的为一个新的promise对象。且该promise对象的状态为pending,then方法为一个同步操作,then中的函数参数为异步操作。

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise
如上图我们就可以看到then方法的返回值仍然为一个promise对象,且在刚生成该对象时的状态为pending。

由此衍生出了链式操作:

new Promise(()=>{}).then().then()

在该操作中,如果promise对象的状态不改变则不会执行then方法中的函数。那么在then方法返回的promise对象中如何让其状态改变呢??

  1. 使用return可以将then方法返回的promise对象状态改为fulfilled。
  2. 在then方法中书写错误代码,即可将其promise对象状态改为rejected

实例:

let p = new Promise((res,rej)=>{
	res('苏凉');
})

let t = p.then((value)=>{
    return "name:"+value;
},(reason)=>{
    console.log("执行失败!");
})

t.then((value)=>{
    console.log(value);
},(reason)=>{
    console.log(reason);
})
console.log(t);

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

catch方法

catch方法在promise对象的状态为rejected时亦或者是输入错误代码时被调用,并返回错误原因。

let p = new Promise((res,rej)=>{
    throw newError("出错啦!")
})
p.catch((reason)=>{
    console.log(reason);
})
console.log(p);

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise

解决回调地狱

//封装Ajax请求函数
function getAjax(path,data){
   return new Promise((resolve,reject)=>{
        $.ajax({
            type:'get',
            url:path,
            data:{data},
            success:function(res){
                resolve(res)
            },
            error:function(res){
                reject(res)
            }
        })
    })
}

getAjax('./data1.json')
.then((value)=>{
    let id = {value};
    return getAjax("./data2.json",id)
})
.then((value)=>{
    let {username} = value;
    return getAjax('./data3.json',username)
})
.then((value)=>{
    console.log(value);
})

promise解决回调地狱,web前端,ES6基础语法,javascript,前端,开发语言,promise文章来源地址https://www.toymoban.com/news/detail-832268.html

到了这里,关于【Promise】一文带你了解promise并解决回调地狱的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一文带你快速了解Python史上最快Web框架

    【作者主页】: 吴秋霖 【作者介绍】:Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作! 【作者推荐】:对JS逆向感兴趣的朋友可以关注《爬虫JS逆向实战》,对分布式爬虫平台感兴趣的朋友可以关注《分布式爬虫平台搭建

    2024年02月05日
    浏览(51)
  • 解决微信小程序回调地狱问题

    一、背景     小程序开发经常遇到根据网络请求结果,然后继续 处理下一步业务操作,代码如下: 这段代特点:层层嵌套,逻辑负责可读性低,不易维护。解决方案使用 new Promise((resolve, reject) = {})可使用异步顺序执行来解决。 二、代码示例 第一个请求函数代码示例 第

    2024年02月09日
    浏览(53)
  • Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

    目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 本文将介绍在Vue中父子组件如何进行通信 这里先介

    2024年02月05日
    浏览(117)
  • HarmonyOS通过async与await同异步转换 解决异步回调地狱

    我在 HarmonyOS 发送http网络请求 中讲述了 HTTP请求的基本方式 然后 就带出了 回调地狱的问题 然后 上文 HarmonyOS 通过Promise 解决异步回调地狱问题 我们用Promise的解决方案 搞定了 这个问题 但是 Promise 这种写法 可读性其实没有那么优秀 没有搞定 Promise return规则的人甚至都看不懂

    2024年01月24日
    浏览(48)
  • [网络安全]一文带你了解SSTI漏洞(结合Web_python_template_injection解题详析)

    SSTI是Server-Side Template Injection的缩写,是一种Web应用程序安全漏洞,主要存在于使用基于模板引擎的Web应用程序中。 SSTI漏洞的主要原因是 在Web应用程序中使用了基于模板引擎的渲染功能,并且没有正确地验证和过滤用户输入的数据。当攻击者能够构造特定的输入并成功地注入

    2024年02月08日
    浏览(44)
  • Uncaught (in promise)解决方法

    \\\"Uncaught (in promise)\\\" 是 JavaScript 的一种错误,通常是在执行 Promise 时发生的。解决方法可能有以下几种: 在 catch 块中处理错误。例如:

    2024年02月16日
    浏览(50)
  • JavaScript如何解决返回[object Promise]

    当使用JavaScript中的Promise时,当您尝试访问Promise的值时,您可能会看到返回值为 [object Promise] 的情况。这是因为Promise是一种异步操作,它不能立即返回结果,而是需要等待操作完成后返回结果。 要访问Promise的值,您需要使用Promise的then()方法,该方法接受一个回调函数作为参

    2024年02月12日
    浏览(39)
  • ❤ 报`Uncaught (in promise)`错误解决办法

    使用了promise,但是在使用的过程中报Uncaught (in promise)错误,第一次遇到这种错误,记录下,方便以后解决 ❤ 问题: ❤ 解决: 后面加上new Promise((resolve, reject) ={}).catch((e) = {}),就不会报错了

    2024年02月07日
    浏览(62)
  • 报`Uncaught (in promise)`错误解决办法

    使用了promise,但是在使用的过程中报 Uncaught (in promise) 错误,第一次遇到这种错误,所以在此记录下,方便以后解决问题 只要在 new Promise 后面加上 new Promise((resolve, reject) ={}).catch((e) = {}) ,就不会报错了 有收获?希望老铁们来个三连击,给更多的同学看到这篇文章 1、老铁们,

    2024年02月11日
    浏览(61)
  • 一文搞懂 Promise 新 Api allSettled 的用法和 all 区别,以及如何在不支持新特性的环境下实现一个 Polyfill

    返回一个数组,每一个元素都是一个对象,里面必然包含 status 属性 status 属性只会有两个值, fulfilled 或者 rejected ,非黑即白的既即视感 allSettled 总是走 then 的,也就是并发的 Promise 出现 reject 也不会走 catch ,需要自行遍历返回的数组,判断 status 来做错误捕获 对象中还有另

    2024年02月01日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包