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详解

介绍

一.表达
1. promise是ES的一门新技术
2. 是js中异步编程的新解决方案
二.具体
1. 从语法上来说:promise是一个构造函数
2. 从功能上来说:promise对象用来封装一个异步操作并可以获取成功/失败的结果值

异步编程

* fs 文件操作
* 数据库操作
* AJAX请求
* 定时

传统的解决异步编程都是通过回调函数解决的

promise 的状态

指的是实例对象中的一个属性【promiseState】
* pending 未决定的
* resolved / fullfilled c成功
* rejected 失败
状态改变只能改变一次,并且只能有pending—》成功或者失败

promise 的对象的值

指的是实例对象中的一个属性 【promiseResult】
保存着对象【成功/失败】的结果
* resolve
* reject

promise 构造函数

1.在promise内部的代码【执行器】会立即执行[不在等待队列中]
2.then中的函数在等待队列

promise.resolve() 【Promise.reject()相同但是’只能‘返回直白】

1.这个是promise函数对象的一个函数,不是实例对象的
2.使用:
var p1 = Promise.resolve(new Promise((resolve,reject)=>{
resolve(‘yes’)
}))
3.作用:返回一个promise对象,这个对象的状态就是传入promise的状态,值就是返回的值

  • 如果传递的不是一个promise对象,返回resolve,值为传入的值

promise.all() 【Promise.race(),相同但是,返回的是第一个成功的状态以及值】

1.传入一个数组,里面全是promis对象,返回一个"新的promise"
2.当里面所有的promise对象是成功才成功,返回的是一个成功值组成数组
3.有一个失败就为失败
4.使用:
p1 = Promise.resolve(“ok”)
p2 = Promise.resolve(“ok”)
const p2 = Promise.all([p1,p2])

promise关键问题

如何修改promise对象的状态

1.reslove()
2.reject()
3.抛出异常:throw

一个promise指定多个成功失败的回调函数,都会调用吗

都会调用

关于状态改变【resolve和reject】,和指定回调函数【then】的执行先后

1.都有可能先执行
2.先执行改变状态:
* 直接在执行器中调用resolve/reject
* 延迟更长时间调用then
3.什么时候得到数据
* 如果先执行then,当状态改变时才调用then里面的回调函数,得到数据
* 如果先执行状态,当执行到then的时候,直接调用里面的函数

关于then()的返回

1.then()返回的是一个新的promise对象
2.4种结果
*不写return,不返回任何东西:新的promise:状态成功,值:undefinde
*如果抛出异常, 新的promise:状态失败,值:异常的值
*如果返回非promise的值, 新的promise:状态成功,值:返回的值
*如果返回的是一个promise, 新promise:返回的promise
3.例子
var p1 = new Promise((resolve,rejecr)=>{
resolve()
})
var p2 = p1.then(()=>{
return ‘123’
})

promise的链式调用

1.由于then返回的是一个promise对象,那么就可以一直.then().then()

promise异常穿透

1.只在最后写一个cathch,不管那里失败了,都会在最后一个catch报出来
var p = new Promise((resolve,reject)=>{ resolve() })
p.then(res=>{
console.log(‘111’)
})
.then(res=>{
throw ‘失败’ //这里
})
.then(res=>{
console.log(‘222’)
})
.catch(
err=>{
console.log(err)
})

中断promise链

1.有且只有一种放方法,返回一个pending状态的promise,这样then返回的也是一个pending状态的promise,不会执行下一个then
2.不能throw,reject,因为实质上还是执行了的,只是穿透到了最后的catch,并没有中断
var p = new Promise((resolve,reject)=>{ resolve() })
p.then(res=>{
console.log(‘111’)
})
.then(res=>{
return new Promise(()=>{}) //这里
})
.then(res=>{
console.log(‘222’)
})
.catch(
err=>{
console.log(err)
})

自定义Promise

async和await

async

1.async处理的函数返回的是一个promise对象【和then相似】
2.promise的状态与值:
* 如果返回一个非promise数据。状态:成功,值:数组
* 如果返回一个promise对象 。与promise相同
* 如果抛出异常: 。状态:失败,值:异常结果
3.例子:
async function a(){
return ‘123’
}
var b = a()
cnosole.log(b)

await 表达式

  1. await右侧的表达式一般为promise对象,但是也可以是其他值
  2. 如果为promise对象,await返回的是promise成功的”值“
  3. 如果是其他值,是啥就返回啥【没啥用】
    • 注意,await必须写在async函数中【但是async可以没有await】
    • 如果await的promise为失败,就会抛出异常,需要通过try-catch捕获处理
      4.例子:
      async function c(){
      let p = new Promise((resolve,reject)=>{
      resolve(“成功了”)
      })
      let m = await p
      console.log(m)
      }
      c() //输出: ‘成功了’
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-15 11:32:29  更:2022-05-15 11:32:57 
 
开发: 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/23 20:22:03-

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