Promise

于 2022-11-10 19:29:40 发布
阅读量98 收藏
点赞数
文章标签： 学习 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56230435/article/details/127794755
版权

1.Promise_语法学习

目标

  • 掌握Promise相关语法使用

讲解

  1. Promise在设计之初, 就是为了解决回调地狱

  2. 新建html文件, 来熟悉下Promise的相关语法

// 语法:
/*
            let Promise对象变量名 = new Promise((resolve, reject) => {
                // resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
                resolve(成功结果) // 触发.then()小括号里函数体执行
                reject(失败结果) // 触发.catch()小括号里函数体执行
            })


            Promise对象变量名.then((成功结果变量名) => {

            }).catch((失败结果变量名) => {

            })

        */
let p = new Promise((resolve, reject) => {
    // resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
    
    // resolve('成功了')
    reject('失败了')
})

p.then(res => {
    console.log(res)
}).catch(err => {
    console.error(err)
})

2.Promise_配合异步

目标

  • 掌握用Promise来管理异步代码

讲解

  1. 新建10.Promise_配合异步.html来使用Promise包裹一个异步任务代码, 来看看效果

// 例1 配合定时器使用
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功结果')
    }, 2000)
})

p.then(res => {
    console.log(res); // 2秒后返回'成功结果'
})

 

3.Promise_三种状态

目标

  • 了解Promise的三种状态

讲解

  1. 新建11.Promise_三种状态.html来讲解, 在上个代码的例子来说明为何代码会这样执行

// 1. 创建Promise对象并返回此对象在原地, 并立刻执行函数内代码, 交给浏览器去做倒计时了(异步, 不会阻塞主线程代码往下走, 所以继续走2)
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // 3. 等2秒后, resolve触发, 影响p对象状态
        resolve('成功结果') // resolve => fulfilled状态 => .then
        reject('失败结果') // reject => rejected状态 => .catch
    }, 2000)
})

// 2. 立刻给p对象添加.then函数并传入函数体等待被调用接收成功结果(此是.then()小括号里函数体不会执行)
p.then(res => {
    console.log(res); // 2秒后返回'成功结果'
}).catch(err => {
    console.error(err)
})

// 总结: 每个Promise对象有状态凝固特性, 就是Promise对象确定是成功/失败, 就不能再备更改了

2.所以Promise有三种状态

  • new实例化后, Promise对象(pending准备状态) -> 也是在原地给个承诺

  • 当Promise内代码执行了resolve, 会导致所在的Promise对象(fulfilled成功状态) -> 兑现状态 -> 把值传给then

  • 当Promise内代码执行了reject, 会导致所在的Promise对象(rejected失败状态) -> 拒绝状态 -> 把失败值传给catch  

 

4.Promise_链式调用

目标

  • 掌握Promise的链式调用

讲解

  1. 编写代码进行讲解

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 2000)
})

p.then(res => {
    console.log(res);
    return p2 // 如果return一个Promise对象,它的结果, 会被下个then接收
}).then(res => {
    console.log(res);
})

5.Promise_解决回调地狱

目标

  • 使用Promise来解决回调地狱

    // 目标: 使用Promise的链式调用解决问题
// 前提: axios函数在原地返回的就是一个Promise对象
let pname = ''
axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    // 2. 获取某个省, 对应的城市列表
    pname = res.data.data[5];
    return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
}).then(res => {
    // 3. 获取某个市, 对应的地区列表
    let cname = res.data.data[0]
    return axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)
}).then(res => {
    console.log(res);
})

讲解

  1. 新建html文件, 用axios方法原地返回Promise对象特性

  2. 用.then()里return Promise对象结果会被链式调用下一个then接收特性

6.Promise的静态方法_all

目标

  • 能说出Promise.all方法的作用

讲解

  1. 讲解Promise的all方法  

// 目标: 讲解Promise的all方法
// 静态(类)方法: 直接用Promise类来调用
// 1. Promise.all() 
// 作用: 合并多个Promise对象, 等待所有成功后, 返回结果
// 语法: Promise.all([promise对象1, promise对象2, ...]).then()
// 特点: 返回最终结果是个数组, 值是按顺序对应小Promise对象的成功结果
// 注意: 如果有1个Promise失败, 则整个Promise对象则失败
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 2000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功3')
    }, 2000)
})

Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
})

7.Promise的静态方法_race

目标

  • 能说出Promise.race方法的作用

讲解

  1. 讲解Promise的race方法

// 目标: 讲解Promise的race方法
// 静态(类)方法: 直接用Promise类来调用
// 1. Promise.race() - 赛跑机制
// 作用: 发起并行多个Promise对象, 等待只要任何一个成功, 返回结果执行then
// 语法: Promise.race([promise对象1, promise对象2, ...]).then()
// 特点: 返回某个promise对象成功的结果
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 2000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功3')
    }, 2000)
})

Promise.race([p1, p2, p3]).then(res => {
    console.log(res);
})

7.Promise的静态方法resolve和reject

目标

  • 能说出Promise的静态方法resolve和reject方法作用

讲解

  1. 了解Promise的resolve和reject方法即可

// 目标: 讲解Promise静态方法的resolve和reject
// 1. 先看如下效果, 封装求2个数的和函数
function sumFn(numA, numB) {
    if (numA && numB) {
        return numA + numB
    } else {
        return '请传递参数'
    }
}

let result1 = sumFn(10, 20)
let result2 = sumFn()
// 返回的结果要么是和要么是字符串, 不太方便判断是否成功/失败


// 2. 所以这个时候, 我们可以用Promise的静态方法, 把结果包装成Promise对象

// 3. Promise.resolve()
// 作用: 把现有的值包装成成功状态的Promise对象并返回
// 返回值: 一个成功状态的Promise对象和结果
function myFn(numA, numB) {
    if (numA && numB) {
        return Promise.resolve(numA + numB) // 现在返回的Promise对象
    } else {
        return '报错'
    }
}

myFn(10, 20).then(res => {
    console.log(res);
})

// 但是myFn().then() 这样写会报错, 因为返回的字符串无法调用then

// 解决, 也得把错误提示字符串包装成Promise对象
// 4. Promise.reject()
// 作用: 把现有的值包装成失败状态的Promise对象并返回
// 返回值: 一个失败状态的Promise对象和结果
function theFn(numA, numB) {
    if (numA && numB) {
        return Promise.resolve(numA + numB) // 现在返回的Promise对象
    } else {
        return Promise.reject('报错')
    }
}

theFn().then(res => {
    console.log(res);
}).catch(err => {
    console.error(err);
})

// 一般在封装库的时候常用, 所以了解其作用即可

 

前端逍遥子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端知识点之promise
weixin_45362626的博客
07-14 784
Promise 是异步编程的一种更优雅的解决方案，比传统的解决方案——回调函数——更合理和更强大
前端基础进阶之Promise
weixin_34247155的博客
05-10 544
前言 Promise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise出现。 在实际的使用当中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要也是最主要的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下...
前端Promise
热门推荐
yin_ping1101的博客
05-05 1万+
一、Promise的理解与使用 抽象表达: Promise是ES6新增的一种语法，是异步编程的一种解决方案。（旧方案是单纯的使用回调函数） 异步编程：fs文件操作、数据库操作、Ajax、定时器。 具体表达： （1）从语法上说，promise是一种构造函数 （2）从功能上说，promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值。 1. Promise的状态 三种状态： pending（初始状态) f......
promise:Python 中的超高性能 Promise 实现
05-30
承诺这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容安装 $ pip install promise用法下面的示例...
promise.pdf
05-30
promise学习笔记
Javascript Promise用法详解
10-18
JavaScript Promise 是一种处理异步操作的技术，它在ES6中被引入，旨在解决回调地狱问题，提供了一种更强大、规范化的异步编程解决方案。Promise 是一个代表了可能还未完成或已经完成的异步操作的对象，它有三种状态...
promise.md
06-03
promise.md记载了promise的规范 它是一套异步操作处理机制， [Promise A+](https://promisesaplus.com/) 是规范，jQuery、ES2015、q的promise都是对该规范的一种实现.
前端之Promise
weixin_45741841的博客
01-06 669
Promise Promise是将生产者代码与消费者代码连接在一起的一个特殊的JavaScript对象，生产者代码花费它所需的任意长度时间来产出所承诺的结果，而promise将在它准备好时将结果向所有订阅了的代码开放 promise对象的构造器语法如下 let promise = new Promise(function(resolve, reject)) { //excutor(生产者代码， “歌手”) }); 传递给new Promise的函数被称为executor。当new Promise
前端基础之Promise
HXL009的博客
04-05 1612
Promise 在我们写函数的时候通常会使用回调函数，当多个函数相互嵌套调用时就可能会产生回调地狱，为了解决这个问题，promise诞生生了，promise可以说是当前最好用的解决回调地狱的方案了。 Promise简介 promise，中文翻译为承诺，有三种状态pending，fulfilled，rejected，初始时状态为pending，成功时状态为fulfilled，失败时状态为rejected，且状态变化不可逆，只能有pending到fulfilled或pending到rejected。 Promi
前端面试promise
一片涟漪
09-06 730
Promise是什么 Promise是一种异步操作的解决方案，将写法复杂的传统的回调函数和监听事件的异步操作，用同步代码的形式表达出来。 避免了多级异步操作的回调函数嵌套。 Promise最早是一个函数库，现在已经被ES6写入标准用法。 Promise是一种构造函数。 Promise的三种状态 pending—表示还在执行 resolved(fulfilled)—执行成功 rejected—执行失败 Promise特点： 对象的状态不受外界影响； 一旦状态改变，就不会再变，任何时候都可以得到这
前端知识之promise
qq_37169866的博客
02-25 3944
什么是promise？ promise 是 ES6 中提供的原生对象 promise主要用于异步计算，将异步操作队列化，按照期望的顺序执行以返回符合预期的结果 promise的作用 咱们先了解什么是同步，什么是异步 举个形象的例子： 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。 还有个简单的例子 打电话是同步 发消息是异步 异步操作的常见语法（ajax） /
前端 Promise 简介
一个超爱喝可乐的web前端攻城狮
04-20 1858
前端 Promise 简介 Promise概述 Promise是ES6新增的引用类型，可以通过new来进行实例化对象。Promise内部包含着异步的操作。 new Promise(fn) Promise.resolve(fn) 这两种方式都会返回一个 Promise 对象。 Promise 有三种状态： 等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），且Promise 必须为三种状态之一只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。 状
前端神器--promise
zhumengzj的博客
12-05 1238
Promise in js 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。 2015 年 6 月，ECMAScript 6 的正式版 终于发布了。 ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。ES6 的目标，是使得 JavaScript
前端promise理解
zzyzzylalala的博客
09-20 2856
promise学习
前端JavaScript中promise对象
chilingguo的博客
10-02 292
Promise 对象 一、Promise对象是什么 promise的英文意思是承诺，这个承诺只是口头上的，代表他还未实现，等待我们将它实现。 而在前端技术中它本身代表目前该对象还不能使用，把它放起来，等需要的时候在调用。使用promise我们可以用同步的方式写异步的代码（这是什么意思呢？假如：盖房子，都是一根一根标准的木头叠起来的，但是中间需要一根粗的木头，也是一步一步叠加起来的，但是这个粗木头的作用现在可能看不出效果，但是在以后却能显示出效果） 1、来源： ECMAscript 6 原生提供了Promis
前端开发-Promise
outsider_777的博客
07-10 157
Promise 概念 ES6开始支持。 Promise对象用于一个异步操作的最终完成（包括成功和失败）及结果值的表示。 简单说，就是处理异步请求的。 之所以叫做Promise，就是我承诺，如果成功则怎么处理，失败则怎么处理。 executor executor 是一个带有 resolve 和 reject 两个参数的函数 。 executor 函数在Promise构造函数执行时立即执行，被传递r...
promise 未定义
最新发布
06-28
Promise 是 JavaScript 中一种处理异步操作的机制，它代表了一个未来某个时间点会完成的任务的结果。Promise 对象有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当一个 Promise 链中的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值