27_promise

news2025/3/31 18:45:56

插入一下前端助手测试,顺手可以用来做安全

promise

promise 是一个es6新增的语法

汉语:承诺的意思 作用:是专门用来解决回调地狱!!!!

什么是回调函数?

 <script>
        // 回调函数  callback回调
        // 就是把函数A当作参数传递到函数B中
        // 在函数B中以形参的方式去调用
        function fn(a){
           console.log(a()); 
        }

        // function(){} 充当的就是一个回调函数
        fn(function(){return "结果"});


        setTimeout(()=>{

        })

        Array.forEach(()=>{})
        Array.filter(()=>{})
    </script>

回调地狱

<body>
    <script src="./ajax.js"></script>
    <script>
        // 回调地狱
        // 为什么要有回调函数
        // - 当我们有一个异步行为的时候,我们需要在一个异步行为执行完毕之后做一些事情
        // - 我如何知道这个异步行为啥时候完毕
        // - 这时候我们就可以用回调函数的形式来进行

        // eg:比如 现在我要调用注册接口
        //    想要的效果是注册成功之后  在去马上登录
        //    咋知道啥时候注册成功呢?  调用注册接口时会有回调函数
        //    一旦走了回调函数  代表注册成功
        ajax({
            url: "/users/register",
            method: "post",
            data: {
                username: "hahahhahahah",
                password: "123456",
                rpassword: "123456",
                nickname: "踏月11111"
            },
            success(res) {
                console.log("第一次请求");
                ajax({
                    url: "/users/login",
                    method: "post",
                    data: {
                        username: "hahahhahahah",
                        password: "123456"
                    },
                    success(res) {
                        console.log("第二次请求");
                        ajax({
                            url:"XXX",
                            success(){
                                console.log("第三次请求");

                            }
                        })
                    }
                })
            }
        })

        // 回调函数  里边 套回调函数  套回调函数....
        // 缺点:代码可读性不好





    </script>
</body>

promise的基本语法

  // 基本语法:
        // Promise中 写异步代码
        // 
       let p1 = new Promise(function(resolve,reject){
            //resolve("成功")
            reject("失败")
       })
      // 一旦调用了.then 就会触发resolve 方法
     // 一旦调用了 .catch 就会触发   reject 方法
       p1.then(res=>{
        console.log(res);
       })
       p1.catch(err=>{
        console.log(err);
       })

    //promise 有三种状态
    // pending  -- 创建成功  等待中
    // fulfilled -- 调用了resolve  成功时执行
    // rejected  -- 调用了 reject  失败时执行
    new Promise(function(resolve,reject){
        resolve("成功")
        // reject("失败")
    }).then(res=>{
        console.log(res);
    }).catch(err=>{
        console.log(err);
    }).finally(()=>{
        console.log("成功失败都执行");
    })
<body>
    <script>
        // 基本语法:
        // Promise中 写异步代码
    //     // 
    //    let p1 = new Promise(function(resolve,reject){
    //         //resolve("成功")
    //         reject("失败")
    //    })
    //   // 一旦调用了.then 就会触发resolve 方法
    //  // 一旦调用了 .catch 就会触发   reject 方法
    //    p1.then(res=>{
    //     console.log(res);
    //    })
    //    p1.catch(err=>{
    //     console.log(err);
    //    })

    //promise 有三种状态
    // pending  -- 创建成功  等待中
    // fulfilled -- 调用了resolve  成功时执行
    // rejected  -- 调用了 reject  失败时执行




    new Promise(function(resolve,reject){
        resolve(function(){
            return "123"
        });
        // reject("失败")
    }).then(res=>{
        console.log(res());
    }).catch(err=>{
        console.log(err);
    }).finally(()=>{
        console.log("成功失败都执行");
    })



    </script>
</body>
<body>
    <script>
        // 希望过5秒之后 在调用一个定时器  在打印东西
        // 异步代码转成同步代码   同步代码需要等待
        new Promise(function(resolve,reject){
            setTimeout(()=>{
                console.log("5秒的定时器");
                resolve("resolve触发了")
            },5000)
            console.log("嘿嘿嘿");
        }).then(res=>{
            console.log(res);
            setTimeout(()=>{
                console.log("2秒定时器");
            },2000)
        })


        // new Promise(function(resolve,reject){
        //     setTimeout(()=>{
        //         console.log("5秒的定时器");
        //         // resolve("resolve触发了")
        //         setTimeout(()=>{
        //             console.log("我是2秒的定时器");
        //         },2000)
        //     },5000)
        //     console.log("嘿嘿嘿");
        // })
    </script>

封装一个等待函数


<body>
    <script>
        // 成功 失败 状态  是在promise对象才有的
        function wait() {
            let p1 = new Promise((resolve, reject) => {
                // 写你的异步代码
                // XXXX
                setTimeout(() => { resolve("成功") }, 2000)
            })
            return p1
        }
        wait().then(res => {
            console.log(res);
        })
    </script>
</body>

promise解决回调地狱

   // 封装的网络请求函数 ajax-promise.js

        // 哪些是可变的  请求方式  请求地址  请求参数  请求头
        // 可变的  调用函数的时候传参!!! 传谁我就用谁!!
        function ajax(options){
            return new Promise((resolve,reject)=>{
                let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是get
                let url = options.url;
                let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}
                let type = options.dataType || "json"
               
                // ajax希望传的是 ?name=jack&age=18  所以传来的参数进一步处理
                let data = formatData(options.data || {}); 
                // data参数  get和post请求方式不一样  分情况讨论
                // get 方式在地址后边拼接  post方式是通过send(data) 发送的
                if(method.toUpperCase()=="GET"&&data){
                    // foruth?name=jack&age=18
                    url = url+"?"+data
                }
    
                // 1-创建xhr对象
                let xhr = new XMLHttpRequest();
                // 2-设置xhr对象
                xhr.open(method,`http://localhost:8888${url}`)
                for(let key in header){
                    xhr.setRequestHeader(key,header[key]);
                }
                // 3- 发起请求
                // 分成两种情况   post请求的话 参数是通过send取发送的
                if(method.toUpperCase()=="POST" && data){
                    xhr.send(data);
                }else{
                    xhr.send();
                }
               
                // 4- 处理响应结果
                xhr.onload = function(){
                    // 有可能是纯字符串  有可能是json字符串 (最常用的json串)
                    let result;
                    if(type=='json'){
                       result = JSON.parse(xhr.responseText)
                    }else{
                       result = xhr.responseText
                    }
    
                    // options.success(result)
                    resolve(result)
                }
            })
        }

        // 格式化data的函数
        function formatData(obj){
            let data = "";  // 保存保存处理好之后的数据
            for(let key in obj){
                data += `&${key}=${obj[key]}`
            }
            data = data.slice(1);//从下标为1开始截取到最后
           return data;
        }
<!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="./ajax-promise.js"></script>
</head>

<body>
    <!-- ajax函数  封装成一个promise  -->
    <script>
        // promise.then().then().then()  正确的学法
        // promise.then(XXXX.then().XXXX.then)
        ajax({
            url: "/users/register",
            method: "post",
            data: {
                username: "hahahhahahah123",
                password: "123456",
                rpassword: "123456",
                nickname: "踏月11111"
            }
        }).then(res => {
            console.log("第二次请求");
            ajax({
                url: "/users/login",
                method: "post",
                data: {
                    username: "hahahhahahah",
                    password: "123456"
                },
            })
        }).then(res => {
            console.log("第三次请求");
        })
    </script>

</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324403.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode刷题日记——跳跃游戏 II

[ 题目描述 ]&#xff1a; [ 思路 ]&#xff1a; 题目要求在一个一定能达到数组末尾的跳跃数组中(见55题 跳跃游戏)&#xff0c;找出能够跳到末尾的最小次数要求次数最少&#xff0c;那肯定是选取能选步数中最大的数。也就是在当前能够达到的距离中&#xff0c;选择能够达到的…

无人机进行航空数据收集对于分析道路状况非常有用-使用无人机勘测高速公路而不阻碍交通-

无人机进行航空数据收集对于分析道路状况非常有用-使用无人机勘测高速公路而不阻碍交通- 瑞士拥有1,400 多公里长的高速公路网络。这些公路将人和货物从山谷高原运送到阿尔卑斯山的最高山口。维护这些高速公路使国家得以顺利运转。高速公路维护的重要性显而易见&#xff0c;但在…

注意力蒸馏技术

文章目录 摘要abstract论文摘要简介方法预备知识注意力蒸馏损失注意力引导采样 实验结论总结参考文献 摘要 本周阅读了一篇25年二月份发表于CVPR 的论文《Attention Distillation: A Unified Approach to Visual Characteristics Transfer》,论文开发了Attention Distillation…

PERL开发环境搭建>>Windows,Linux,Mac OS

特点 简单 快速 perl解释器直接对源代码程序解释执行,是一个解释性的语言, 不需要编译器和链接器来运行代码>>速度快 灵活 借鉴了C/C, Basic, Pascal, awk, sed等多种语言, 定位于实用性语言,既具备了脚本语言的所有功能,也添加了高级语言功能 开源.免费 没有&qu…

鸿蒙项目源码-记账本app个人财物管理-原创!原创!原创!

鸿蒙记账项目源码个人财务管理含文档包运行成功ArkTS语言。 我一个月写的原创作品&#xff0c;请尊重原创。 原创作品&#xff0c;盗版必究&#xff01;&#xff01;&#xff01; api12 SDK5.0.0仅适用于最新的2024版本DevEco studio 共9个页面&#xff1a;广告倒计时页、登录、…

Ovito的python脚本

在 OVITO 里,Python 对象是构建脚本化操作的基础。下面为你详细介绍 OVITO 中 Python 对象的基本概念: 1. 数据管道(Pipeline) 数据管道是 OVITO 里最核心的对象之一。它就像一个流水线,把数据输入进来,经过一系列处理步骤,最后输出处理好的数据。 创建管道:借助 imp…

【免费】2007-2019年各省地方财政文化体育与传媒支出数据

2007-2019年各省地方财政文化体育与传媒支出数据 1、时间&#xff1a;2007-2019年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区、年份、地方财政文化体育与传媒支出 4、范围&#xff1a;31省 5、指标说明&#xff1a;地方财政在文化、…

NOIP2007提高组.矩阵取数游戏

题目 492. 矩阵取数游戏 思路 不难发现, 每一行之间是独立的, 因此可以求出每一行的最大值, 然后行与行之间最大值相加, 就是总的最大值 对于行内来说, 每次可以选取左边或者右边, 可以使用区间 d p dp dp求解, 时间复杂度 O ( n 3 ) O(n ^ 3) O(n3), 因为列的最大值是 80 …

项目实战--权限列表

后端数据&#xff1a; 用表格实现权限列表 const dataSource [{key: 1,name: 胡彦斌,age: 32,address: 西湖区湖底公园1号,},{key: 2,name: 胡彦祖,age: 42,address: 西湖区湖底公园1号,}, ];const columns [{title: 姓名,dataIndex: name,key: name,},{title: 年龄,dataInd…

若依赖前端处理后端返回的错误状态码

【背景】 后端新增加了一个过滤器&#xff0c;用来处理前端请求中的session 若依赖存放过滤器的目录&#xff1a;RuoYi-Vue\ruoyi-framework\src\main\java\com\ruoyi\framework\security\filter\ 【问题】 后端返回了一个状态码为403的错误&#xff0c;现在前端需要处理这…

【计网】数据包

期末复习自用的&#xff0c;处理得比较草率&#xff0c;复习的同学或者想看基础的同学可以看看&#xff0c;大佬的话可以不用浪费时间在我的水文上了 1.数据包的定义&#xff1a; 数据包是网络通信中的基本单元&#xff0c;它包含了通过网络传输的所有必要信息。数据包的结构…

web权限划分提权和移权

前言&#xff1a;权限的基本认知 渗透权限划分&#xff1a;假如我们通过弱口令进入到web的后台 这样我们就拿到了web的管理员权限 管理员权限是web中最高的权限&#xff08;一般我们进入web的时候数据库会进行用户权限的划分&#xff1a;假设 0-10为最高的权限 11-10000为普通…

LocalDateTime序列化总结

版权说明&#xff1a; 本文由CSDN博主keep丶原创&#xff0c;转载请保留此块内容在文首。 原文地址&#xff1a; https://blog.csdn.net/qq_38688267/article/details/146703276 文章目录 1.背景2.序列化介绍常见场景关键问题 3.总体方案4.各场景实现方式WEB接口EasyExcelMybat…

[ 春秋云境 ] Initial 仿真场景

文章目录 靶标介绍&#xff1a;外网内网信呼oa永恒之蓝hash传递 靶标介绍&#xff1a; Initial是一套难度为简单的靶场环境&#xff0c;完成该挑战可以帮助玩家初步认识内网渗透的简单流程。该靶场只有一个flag&#xff0c;各部分位于不同的机器上。 外网 打开给的网址, 有一…

unity 截图并且展现在UI中

using UnityEngine; using UnityEngine.UI; using System.IO; using System.Collections.Generic; using System; using System.Collections;public class ScreenshotManager : MonoBehaviour {[Header("UI 设置")]public RawImage latestScreenshotDisplay; // 显示…

中断管理常用API(四)

一、request_irq(...) request_irq 函数主要用于硬中断相关操作&#xff0c;它的核心作用是把一个中断处理函数和特定的中断号进行绑定。当硬件设备触发该中断号对应的中断时&#xff0c;内核就会调用绑定的中断处理函数&#xff0c;像 irqhandler_func 这类。 此函数在多种硬件…

pyspark学习rdd处理数据方法——学习记录

python黑马程序员 """ 文件&#xff0c;按JSON字符串存储 1. 城市按销售额排名 2. 全部城市有哪些商品类别在售卖 3. 上海市有哪些商品类别在售卖 """ from pyspark import SparkConf, SparkContext import os import jsonos.environ[PYSPARK_P…

【HTML 基础教程】HTML <head>

HTML <head> 查看在线实例 - 定义了HTML文档的标题"><title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 - 定义了所有链接的URL"><base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目…

混合知识表示系统框架python示例

前文我们已经深入学习了框架表示法、产生式规则和一阶谓词逻辑,并对它们进行了深度对比,发现它们在不同的应用场景下各有优缺点。 一阶谓词逻辑适合复杂逻辑推理场景,具有数学定理证明、形式化系统规范的优点;产生式规则适合动态决策系统,支持实时决策(如风控、诊断),规…

MATLAB 控制系统设计与仿真 - 30

用极点配置设计伺服系统 方法2-反馈修正 如果我们想只用前馈校正输入&#xff0c;从而达到伺服控制的效果&#xff0c;我们需要很精确的知道系统的参数模型&#xff0c;否则系统输出仍然具有较大的静态误差。 但是如果我们在误差比较器和系统的前馈通道之间插入一个积分器&a…