Promise的理解

最新推荐文章于 2024-01-25 15:13:17 发布
最新推荐文章于 2024-01-25 15:13:17 发布
阅读量356 收藏
点赞数
分类专栏： web前端开发 文章标签： javascript ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljhhappy666/article/details/122304799
版权

/*

    1. promise讲解
    1. 原生js中实现promise
    1. jquery中实现promise
    1. node启静态文件服务
      */

Promise 是什么

一种异步解决方案，相当于一种规范。

如果遇到多个接口调用的时候，这时候就尽管使用promise就可以了

以前处理异步的方式

        $.ajax({
            // ...., 
            success:function(){  //成功之后的状态 id
                // 获取到id；
                
                // name
                $.ajax({
                    // id
                     success:function(){
                        //  name
                        $.ajax({
                            // id
                            success:function(){
                                //  name

                            }

                        })
                     }

                })
            } 
        });

Promise 详细介绍

    Promise 解决js中多个异步回调优化/维护...的问题。
    异步
    同步

    原生js提供了promise对象
    let pro = new Promise();

    es6中promise对象是一个构造函数，用来生成promise实例。

    // axios

js jQuery中实现

//原生js封装公共的promise对象
const getJSON = function(url,type,data){
    const promise = new Promise(function(resolve,reject){
        const handler = function() {
            if(this.readyState !==4){
                return;
            };
            if(this.status === 200){  //成功的状态
                resolve(this.response);
            }else{  //失败
                reject(new Error(this.statusText));
            }
          };
         const client = new XMLHttpRequest();//创建对象
         client.open(type,url);//建立连接
         client.onreadystatechange = handler;
         client.responseType = 'json';//数据格式
         if(type =='get'){
             client.send();  //发送get请求
         }else{
             client.setRequestHeader("Content-type","application/json");//头信息
             client.send(JSON.stringify(data));
         }
    });
    return promise;    
}

//使用封装的promise：
        // post请求
        getJSON("http://localhost:3000/add","post",{name:name,msg:msg})
        .then(function(res){ //成功
            console.log(res);
            for(let i=0;i<res.length;i++){
                $(".messageList").append(`<li class="list-group-item">${res[i].name}
                <span>说：</span> ${res[i].msg}
            </li>`);
            }
        },function(error){ //失败
            console.log(error);
            
        });

        //get请求
        getJSON("http://localhost:3000/add","get")
        .then(function(res){ //成功
            console.log(res);
        },function(error){ //失败
            console.log(error);
        })

        // //链式写法  串行
        getJSON("http://localhost:3000/add","get")
        .then(function(res){ //成功  第一个请求完成了，  id

            console.log(res);

        },function(err){
            console.log(err);
            
        })
        .then(function(){  //再进行另一个请求 
            // name 订单里的名称
        },function(err){
            console.log(err);
            
        })
        .then(function(){  //再进行另一个请求 
            // name 订单里的名称
        })
        .then(function(){   
            // name 订单里的名称
        },function(err){
            console.log(err);
            
        })
// jq
$(function(){
       //提交
    $(".container .submit").click(()=>{
        let _name = $(".name").val();
        let _msg = $(".message").val();
        if(_name == '' || _msg==''){
            alert("请输入内容");
        }else{
            $(".name,.message").val("");
            //列表展示
            // 第一种写法
            $.ajax({
                url:'http://localhost:3000/add',
                type:'post',
                data:{name:_name,msg:_msg},
                dataType:'json'
            })
            .then(function(res){

            })
            .then(function(res){

            })
            .then(function(res){

            })
            .catch(function(err){

            })


            // 第二种写法
            $.ajax({
                url:'http://localhost:3000/add',
                type:'post',
                data:{name:_name,msg:_msg},
                dataType:'json'
            })
            .done(function(res){
                console.log(res);
                for(let i=0;i<res.length;i++){
                    $(".messageList").append(`<li class="list-group-item">${res[i].name}
                    <span>说：</span> ${res[i].msg}
                </li>`);
                } 
            })
            .fail(function(err){
                console.log(err);
                
            })

            // 两者的区别：done不支持链式写法，不会延续任务的调用。 then则相反。
            // 只需要调用一次  done 
            // 链式写法 then
        }
    }); 
})

//jq串行写法
$(function(){
    //提交
    $(".queryThen").click(()=>queryThen());
    let queryThen = ()=>{
        //发送的第一个请求  id
        $.ajax({
            url:'http://localhost:3000/add',
            type:'get',
            dataType:'json'
        })
        .then(function(res){  //成功
            // id
            // 发送的第二个请求
            return $.ajax({
                url:'http://localhost:3000/add2',
                type:'post',
                data:{name:_name,msg:_msg},
                dataType:'json'
            })
        })
        .then(function(res){

        },function(err){

        })
    }
});


//jq 并行  两个请求同时发
$(function(){
    //提交
    $(".queryWhen").click(()=>queryWhen());
    let queryWhen = ()=>{
        //发送的第一个请求  id
        $.when($.ajax({url:'http://localhost:3000/add',type:'get',dataType:'json'}),
                $.ajax({url:'http://localhost:3000/add',type:'post',dataType:'json',{name:_name,msg:_msg}))

        .then(function(data1,data2){  //成功
            console.log(data1);
            console.log(data2);
        })
        
    }
});

Promise.then()

// //链式写法  串行
        getJSON("http://localhost:3000/add","get")
        .then(function(res){ //成功  第一个请求完成了，  id

            console.log(res);

        },function(err){
            console.log(err);
            
        })
        .then(function(){  //再进行另一个请求 
            // name 订单里的名称
        },function(err){
            console.log(err);
            
        })
        .then(function(){  //再进行另一个请求 
            // name 订单里的名称
        })
        .then(function(){   
            // name 订单里的名称
        },function(err){
            console.log(err);
            
        })

Promise.catch()

	$.ajax({
        url:'http://localhost:3000/add',
        type:'post',
        data:{name:_name,msg:_msg},
        dataType:'json'
    })
    .then(function(res){

    })
    .then(function(res){

    })
    .then(function(res){

    })
    .catch(function(err){

    })

Promise.all()

 //原生js并行的实现
$(function(){
    //提交
    $(".queryWhen").click(()=>queryWhen());
    let queryWhen = ()=>{
         //并行 两个请求同时发  
        let getPromsie1 = new Promise(function(resolve,reject){
            getJSON("http://localhost:3000/add","get")
            .then(function(res){ //成功
                console.log(res);
               
            },function(error){ //失败
                console.log(error);
                
            });
        });
        let getPromsie2 = new Promise(function(resolve,reject){
            getJSON("http://localhost:3000/add","post",{name:'aa'})
            .then(function(res){ //成功
                console.log(res);
               
            },function(error){ //失败
                console.log(error);
                
            });
        });
        promise.all([getPromsie1,getPromsie2])
        .then(([data1,date2])=>{  //成功
            console.log(data1);
            console.log(date2);
            
        },function(err){ //失败
            console.log(err);
            
        })
    }
});
ེ夜雨微澜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Promise的深入理解
killbee365的博客
07-01 402
一、promise 的认识 1.js的单线程 1）javascript的执行环境是单线程的 2）单线程：指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务，这个任务可称为主线程，但是实际上还有其他线程，如事件触发线程、ajax请求线程等 2.同步与异步 1）同步模式：也就是单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，返回执行的结果，才能进行下一个任务，如果这个任务执行的时间较长，就会导致线程阻
promise 理解
遗忘了的自己
11-15 498
Promise 你需要知道的几点 创建 Promise 时（即 new Promise…)，内部同步代码会立即执行，异步代码会在次轮事件循环执行 try…catch 无法抓取 异步任务 错误， 因为 try…catch 代码在主线程，异步任务在工作线程，在执行异步任务时主代码同步任务try…catch 都已经执行完了 Promise.reject(new Error(‘xxx’)) 或 Promise.reject(‘xxxx’) reject 其实是返回错误信息的回调方法，它并不是 thro
JS Promise理解
bocai_xiaodaidai的博客
09-27 4417
Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，实例对象上有then、catch等方法。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作，如ajax请求）的结果。
前端promise理解
zzyzzylalala的博客
09-20 2863
promise学习
Promise理解
最新发布
m0_73593563的博客
01-25 1066
对象的三种状态不受外界影响，状态改变只有两种情况：pending -> fulfilled(已处理) / rejected(已拒绝)。在以前的JavaScript代码中，多个异步操作嵌套过深，难以维护和理解，这就是所谓的回调地狱。，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。可以让异步操作按照顺序执行，并且可以链式调用，使得代码更加清晰和易于管理。是一个对象，它代表了一个异步操作的最终完成或者失败。还可以处理异步操作的成功和失败，使得错误处理更加方便。
Promise理解及实现Promise
01-08
Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是： 等待中（pending） 完成了 （resolved） 拒绝了（rejected） 这个承诺一旦从等待状态变成为其他状态就永远不能...
深入理解Promise.all
10-18
主要介绍了深入理解Promise.all，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入理解js promise chain
10-22
下面小编就为大家带来一篇深入理解js promise chain。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
讲解 对 promise 的 理解 与 使用
04-14
promise的用途说明
JS面试题总结
ljhhappy666的博客
02-17 5090
1.Window.onLoad 和 DOMContentLoaded事件的先后顺序? 顺序 一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行 DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行 区别 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图
vscode保存代码，自动按照eslint规范格式化代码设置（vscode最新版配置）
ljhhappy666的博客
01-12 1676
vscode保存代码，自动按照eslint规范格式化代码设置 编辑器代码风格一致，是前端代码规范的一部分。我们现在前端绝大部分都在使用eslint，或者将要把代码改为eslint，那么此时我们怎么方便使用这个规范呢，下面我来介绍一下使用vscode+eslint 自动保存，自动格式化的一种方式！ 首先需要装一些vscode插件 eslint、Vetur、Prettier Now，具体的插件说明可参考作者之前的一篇文章。 vscode插件安装 安装完成后需要配置一下eslint，打开eslint的配置文件（左
react面试总结
ljhhappy666的博客
02-16 1254
1.React 中 keys 的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 render () { return ( ‹ul› { this.state.list.map(({item, key}) =› { return ‹li key={key}›{item}‹/li› }) } ‹/ul› ) } 在开发过程中，我们需要保证某个元素的 key 在其同级元素中具
高级前端面试题
ljhhappy666的博客
04-11 917
1.v-show和v-if有什么区别 什么时候使用最好 区别：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏； 什么时候使用：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 2.带宽增加，什么方式去考虑问题 1.病毒 在服务器上安装杀毒软件，进行杀毒。 2.网络攻击 登陆阿里云管理控制台，查看云盾中的防护 DDOS 攻击是否调整好阈值， 并核
css3面试总结
ljhhappy666的博客
02-16 808
1.null，undefined的区别？ null表示一个对象被定义了，但存放了空指针，转换为数值时为0。 undefined表示声明的变量未初始化，转换为数值时为NAN。 typeof(null) – object; typeof(undefined) – undefined 2.CSS3新增伪类有那些？ p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个
css面试题总结
ljhhappy666的博客
02-18 490
1.null，undefined的区别？ null表示一个对象被定义了，但存放了空指针，转换为数值时为0。 undefined表示声明的变量未初始化，转换为数值时为NAN。 typeof(null) – object; typeof(undefined) – undefined 2.CSS3新增伪类有那些？ p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个
配置 vue 环境
ljhhappy666的博客
11-19 481
配置 vue 环境 一、安装 vue 的环境 安装： yarn add vue -D 在 index.html 中添加挂载点 dom（#app） <div id="app"></div> 在 main.js 中引入 vue import Vue from 'vue' var app = new Vue({ el: "#app", data: { message: 'hello webpack!!' } }) 启动 server，会出现 [Vu
前端模块化
ljhhappy666的博客
01-04 317
前端三大块： 网站的头部 网站中间内容部分 网站的底部 通过代码的方式来实现 index.html的组成
Node.js 基础-01
ljhhappy666的博客
01-08 207
Node.js 基础 课程目标 1、了解 nodejs 特点和应用场景 2、掌握 node 模块系统使用 3、掌握核心 api 使用 4、实战一个简版 Express 服务器 学习 Node 的目标 1、优秀的前端，可以和后端有效沟通 2、敏捷的全栈 --快速开发全站应用 3、架构师-- 践行工程化思想 NodeJS 是什么 简单的说 Node.js 就是运行在服务端的 JavaScript。 https://nodejs.org/en/ http://nodejs.cn/api/ Node.js 是一个基
谈谈对promise理解
10-15
Promise 是一种异步编程的解决方案，它可以避免回调地狱，使得异步操作更加清晰和易于理解。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当 Promise 的状态从 pending 转变为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ེ夜雨微澜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值