【Promise学习】Promise的理解

1、Promise 是什么?

抽象表达:

（1） Promise 是一门新的技术(ES6 规范)

（2）Promise 是 JS 中进行异步编程的新解决方案备注：旧方案是单纯使用回调函数

具体表达:

（1）从语法上来说: Promise 是一个构造函数

（2）从功能上来说: Promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果值

异步编程：fs文件操作，数据库操作，ajax，定时器等

2、为什么要用 Promise?

指定回调函数的方式更加灵活

1. 旧的: 必须在启动异步任务前指定

2. promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

支持链式调用, 可以解决回调地狱问题

1. 什么是回调地狱?

回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

2. 回调地狱的缺点?

不便于阅读不便于异常处理

3. 解决方案?

promise 链式调用

4. 终极解决方案?

async/await

3、Promise初体验

//resolve 解决  函数类型的数据
//reject  拒绝  函数类型的数据
const p = new Promise((resolve,reject) => {setTimeout(()={//30%  获取1-100的随机数let n= rand(1,100)//判断if(n<=30){resolve(n);  //将promise对象的状态设置为成功}else{reject(n);   //将promise对象的状态设置为失败}}，1000)
})//调用then方法
p.then((value)=>{alert('恭喜恭喜',+ value)
}，(reason)=>{alert('再接再厉'+ reason)
})

4、Promise实践练习

（1）fs模块

const fs = require('fs')
fs.readFile('./resource/content.txt',(err,data)=>{//如果出错，则抛出错误if(err)  throw err//输出文件内容console.log(data.toString())
})//promise封装
let p =new Promise((resolve,reject) =>{fs.readFile('./resource/content.txt',(err,data)=>{//如果出错，则抛出错误if(err)  throw err//如果成功resolve(data.toString())})})//调用then
p.then( value=>{console.log(value.toString())
},reason=>{console.log(reason)
})

（2）AJAX请求

<div><h2>Promise 封装AJAX请求</h2><button id="btn">点击发送AJAX请求</button>
</div><script>//接口地址  https://api.apiopen.top/getJoke//获取元素对象const btn = document.querySelector('#btn')btn.addEventListener('click',function(){//创建Promiseconst p = new Promise((resolve,reject) =>{//1、创建对象const xhr = new XMLHttpRequest()//2、初始化xhr.open('GET','https://api.apiopen.top/getJoke')//3、发送xhr.send()//4、处理响应结果xhr.onreadystatechange = function(){if(xhr.readyState ===4){//判断响应状态码 2xxif(xhr.status >= 200 && xhr.status <300){//控制台输出响应体resolve(xhr.response)}else{reject(xhr.status)}}}})//调用then方法p.then(value=>{console.log(value)},reason=>{console.log(reason)})})
</script>

【Promise学习】Promise的理解相关推荐

Promise学习:基础入门
今天来学习下Promise吧,其实这在笔试上也是一个考点. 基本介绍 Promise对象是CommonJS(熟悉的名字吧- -)工作组提出的规范.Promise原本只是社区提出的构想,一些外部函数库率 ...
ES6 Promise的resolved深入理解
Promise的概念在ES6标准推出来之前已经深入人心,很多框架和第三方库都有类似的实现.但在深入理解ES6的Promise对象的时候,受之前经验的影响,很多概念给人似是而非的感觉,其中有一个特别明显 ...
大白话讲解Promise（二）理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
Promise async/await的理解和用法
Promise && async/await的理解和用法为什么需要promise(承诺)这个东西在之前我们处理异步函数都是用回调这个方法,回调嵌套的时候会发现阅读性和调试的 ...
Promise 学习心得
当了这么久码农到今天没事才开始去深究 Promise 这个对象什么是 Promise, Promise 有什么用? 在写代码的时候多多少少都有遇见过地狱式的回调代码看起来没问题就是有点乱,Prom ...
理解promise、promise.all、promise.race
文章目录 promise promise.all promise.race 注意总结 promise Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息. Promise 对象有以 ...
Promise学习笔记(一)
Promise学习笔记(一) 个人博客:Promise学习笔记(一) 一直有在用Promise,但是没有系统学过Promise,自然也不知道原理.现在就来学习一波. 1. 介绍 Promise是JS中 ...
js Promise学习
js Promise promise入参为两个成功时的执行 resolve 失败时的执行 reject promise的状态肯定(fulfilled) 该 Promise 对应的操作成功了否定( ...
Promise学习——解决回调地狱问题
Promise promise 容器概念: callback hell(回调地狱): 文件的读取无法判断执行顺序(文件的执行顺序是依据文件的大小来决定的)(异步api无法保证文件的执行顺序) var ...
ES6学习 - Promise对象
Promise Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步 ...

【Promise学习】Promise的理解

【Promise学习】Promise的理解相关推荐

最新文章

热门文章