IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Promise -> 正文阅读

[JavaScript知识库]Promise

一、介绍

Promise是异步编程的一种解决方案,其实是一个构造函数,自身身上有all,reject,resolve,这几个方法,原型上有then、catch,等方法。

ps:什么是异步编程: fs读取文件、发送ajax、定时器运用等等。

我们可以通俗理解为异步就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有”堵塞“效应。比如,有一个任务是读取文件进行处理。

这种不连续的执行,就叫做异步。相应地,连续的执行,就叫做同步

"异步模式"非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,"异步模式"甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

二、简单的运用

  • new一个Promise对象(pending状态)包装异步操作,执行操作,成功了执行resolve函数,promise状态改为成功,成功再调用then方法时,调用第一个参数,也就是第一个回调函数中的代码,返回一个新的promise对象

?

1.先看回调函数运用

 setTimeout(()=>{
                //30%中奖概率
             let n = rand(1,100);
             if(n<=30){
                 alert('恭喜恭喜 奖品 10万rmb 劳斯莱斯优惠券');
                 console.log(n)
             }else{
                 alert('再接再厉');
                 console.log(n)
  
             } 
            },3000)

2.promise运用

//Promise本身是一个对象,对象里面包裹异步操作()
            //Promise实现 promise是一个构造函数,在实例化的时候,会接受一个参数,这个参数还是一个函数类型的值
            const p = new Promise((resolve, reject) => {   //这个函数有两个形参(两个函数类型的数据)
                //Promise可以包裹一个异步操作
                //30%中奖概率
                setTimeout(() => {
                    let n = rand(1, 100);
                    //判断    
                    if(n<=30){  //封装异步操作之前还可以获取异步操作的结果值(实参)
                        resolve(n); //将promise 对象状态设置为成功   可以理解为传入了一个函数别人帮你调用(成功的时候调用)
                    }else{
                        reject(n); //将promise对象的状态设置为失败    失败的时候调用(理解这就是一个函数,失败的时候别人会调用)
                    }
                }, 1000);
            });

            //调用 then 方法   成功与失败的需求做一个实现(内容的输出)
            p.then((value) => {  //即n  形参的形式接收       then方法也是p对象上的方法
              //第一个函数是对象成功时的回调   resolve的回调
              alert('恭喜恭喜 奖品 10万rmb 劳斯莱斯优惠券,你中奖的数字:'+value);
            }, (reason) => {     //即n
                alert('再接再厉,你的号码为:'+reason);
            });  //两回调函数

三、回调地狱问题

回调函数里面嵌套着回调:

 /* setTimeout(()=>{
       console.log('逻辑1');
        
       setTimeout(()=>{
           console.log('逻辑2');
           
           setTimeout(()=>{
               console.log('逻辑3');
           },5000)

       },5000)

   },5000) */

Promise解决:

 new Promise((resolve,reject) => {
    //第一次网络请求的代码
    setTimeout(() => { 
      resolve();//网络请求成功的时候调用resolve,调用完resolve之后就会继续回调.then()
    },3000)
  }).then(() => {
    //第一次拿到结果的处理代码
    console.log("逻辑1"); 
    return new Promise((resolve,reject) => {
      //第二次网络请求的代码
      setTimeout(() => {
        resolve();//网络请求成功的时候调用resolve,调用完resolve之后就会继续回调.then()
      },3000)
    })
  }).then(() => {
    //第二次拿到结果的处理代码
    console.log("逻辑2"); 

    return new Promise((resolve,reject) => { 
      //第三次网络请求的代码
      setTimeout(() => {
        resolve();//网络请求成功的时候调用resolve,调用完resolve之后就会继续回调.then()
      },3000)
    })
  }).then(() => {
    //第三次拿到结果的处理代码
    console.log("逻辑3"); 
  })

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-19 01:03:52  更:2022-02-19 01:06:17 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 10:45:56-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码