Promise代码详解(show you the code)
认识异步函数
同步函数:
const sum1 =(a,b)=>{
return a+b
}
console.log('AAA');
console.log(sum(5,6));
conosle.log('BBB') 异步函数:封装一个函数,这个函数2秒后返回a+b的和
const sum2 =(a,b,callback)=>{
setTimeout(()=>{
callback(a+b)
},2000)
} console.log('AAA')
sum2(2,3,(result)=>{
console.log(result)
})
console.log('BBB') 错误事例:
const sumAfter2s = (a, b) => {
setTimeout(() => {
return a + b;
}, 2000);
}
这里面的return是定时器的这个函数的返回值,外部函数没有返回值
- 异步(Asynchronouse):不阻塞CPU,CPU先执行别的程序,这段程序被挂起,等它执行完,执行他的回调函数
- 目前的结论:同步函数,自己有返回值,而异步函数没有返回值(个人理解:为什么没有返回值,要拿到他的返回值肯定是有其作用,作用就是有用处,而异步函数会等其他的程序执行完在执行,所以在返回值也没有其作用了)
认识回调黑洞
- 也叫做回调地狱,callback hell
- 回调套回调,层次很多,这样会产生回调黑洞
比如利用刚才的sum2这个函数,计算3,4的和,在把这个值与5相加,这些和在与6相加
三次计算两个数之和
sum2(3,4,(r1)=>{
console.log(r1)
sum2(r1,5,(r2)=>{
console.log(r2)
sum2(r2,6,(r3)=>{
console.log(r3)
})
})
}) 这样的代码难以阅读,和维护,叫做回调黑洞
- 下面引入Promise,来解决回调地狱
Promise -写同步的方法,写异步
- 认识到生活中的电器缺少锲约
- 生活中的电器都是异步工作的,他们工作的时候人不会被阻塞,人可以干别的
- 这些电器在结束工作之后,干的事儿不同,通知形式也不同
- 洗衣机在结束工作后,播放春天在哪里,微波炉工作结束后滴的一声
- 通知形式不同的哲学就是:缺少契约
- Promise就是为了统一这种契约来的:Promise生而为契约
Promise的基本使用
原始:
const sum2 =(a,b,callback)=>{
setTimeout(()=>{
callback(a+b)
},2000)
}
使用Promise:
const sum2=(a,b)=>{
return new Promise((callback)=>{
setTimeout(()=>{
callback(a+b)
},2000)
})
}
这里重写了num2方法,不同的是,
这个函数返回Promise类的实例,在new Promise()的时候,要求传入真正的回调函数。
new Promise(()=>{})里面做异步语句,异步结束后,调用callback()函数,将a+b传回来
也就是说定义确实变的麻烦了,但是,调用它的时候,也换来了快感,此时的异步函数是有返回值的 async function main(){
console.log('AAAA');
const r1 = await sum2(3, 4);
const r2 = await sum2(r1, 5);
const r3 = await sum2(r2, 6);
console.log(r1);
console.log(r2);
console.log(r3);
console.log('BBBB');
}
main(); es6规定,async是标记异步函数的,await后面可以等一个Promise的实例
有await语句的函数前面必须加async标记,并且箭头函数不行 Promise实例天生就有三种状态:pending(进行中),fulfilled(结束),rejected(失败).
一上来就处于pending状态,Promise只有它自己内部的语句,能够把它切换成filfilled的状态。 -什么时候切换呢?
就是new Promise()的时候传入的那个函数的形参被调用的时候,Promise状态会变为fulfilled。
同时resolve()函数中的参数,将成为这个函数的返回值
Promise实际运用
顺序读取文件的例子
原始:
const fs = require('fs') fs.readFile('./a.txt',(err,nr1)=>{
console.log(nr1.toString());
fs.readFile('./b.txt',(err,nr1)=>{
console.log(nr2.toString());
fs.readFile('./c.txt',(err,nr1)=>{
console.log(nr3.toString());
})
})
}) 使用Promise干掉回调地狱,但是使用的时候都要封装
const doFile=(filename)=>{
return new Promise((resolve)=>{
fs.readFile(filename,(err,nr)=>{
resolve(nr.toString())
})
})
}
调用:
async function main(){
const nr1 = await doFile('./a.txt')
console.log(nr1);
const nr2 = await doFile('./b.txt')
console.log(nr2);
const nr3 = await doFile('./c.txt')
console.log(nr3)
}
main();
Ajax顺序读取接口1,2,3
原始地狱写法:
$.get('jiekou1.java',(data1)=>{
alert(data1);
$.get('jiekou2.java',(data2)=>{
alert(data2);
$.get('jiekou3.java',(data3)=>{
alert(data3);
})
})
}) 使用Promise解决,先封装一下
const qingqiu = (url)=>{
return new Promise((resolve)=>{
$.get(url,data=>{
resolve(data);
})
})
}
封装挺恶心的,但是换回的是调用的快感
async function main(){
const nr1 = await qingqiu('jiekou1.java')
alert(nr1);
const nr2 = await qingqiu('jiekou2.java')
alert(nr2);
const nr3 = await qingqiu('jiekou3.java')
alert(nr3)
} 用Axios解决封装的麻烦,Axios这个包封装了Promise版的Ajax,把Aajx封装到了Promise里面了
<script>引入Axios包</script>
async function main(){
const nr1 = await axios.get('jiekou1.php').then(data => data.data);
const nr2 = await axios.get('jiekou1.php').then(data => data.data);
const nr3 = await axios.get('jiekou1.php').then(data => data.data); alert(nr1);
} main();
再vue中axios
{
data(){
return { }
},
methods:{
async loadData(){
const jg = await axios.get('').then(data=>data.data);
this.jg = jg
async changePage(){
const jg =await axios.get('').then(data=>data.data);
}
async changePageSize(){
const jg =await axios.get('').then(data=>data.data);
}
}
}
}
理解Promise契约
将大家都统一了起来
const xiyifu = (脏衣服,洗衣粉) => {
return new Promise((resolve) => {
进水、
进洗衣粉、
洗20分钟、
排水、
再进水、
漂水、
放水、
resolve(干净衣服);
});
}
const menfan = (冷饭) => {
return new Promise((resolve) => {
加蒸汽、
再加蒸汽、
再加蒸汽、
resolve(热饭);
});
} async function main(){
const a = await xiyifu('内裤');
const a = await menfan('米粒');
}
Promise方便调错
try...catch...捕获的“可能发生”的错误,不会影响程序正常执行
console.log(1);
console.log(2);
console.log(3);
try{
console.log('★');
asdfasdflkajsdlfjk
}catch(e){ }
console.log(4);
console.log(5);
// 打印 1 2 3 ★ 4 5 异步函数不能被try...catch... const sumAfter2s = (a, b) => {
return new Promise((resolve, reject) =>{
setTimeout(() => {
if(a + b > 10){
resolve(a + b);
}else {
reject('两个数字太小')
}
}, 2000);
});
}; sumAfter2s(3, 4).then(data => {
console.log(data);
}).catch(e => {
console.log(e);
})
面试题参考
只写一行语句,实现效果:
async function foo(){
// 等到2秒
await _________________________________________________
alert('你好');
}
foo(); 答案:
<script type="text/javascript">
async function foo(){
// 等到2秒
const a = await new Promise((resolve) => {
setTimeout(() => {
resolve(34)
}, 2000)
});
alert(a);
} foo();
</script>
Promise代码详解(show you the code)的更多相关文章
- Java中String的intern方法,javap&cfr.jar反编译,javap反编译后二进制指令代码详解,Java8常量池的位置
一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...
- HTTP协议状态码详解(HTTP Status Code)(转)
原文链接:HTTP协议状态码详解(HTTP Status Code) 使用ASP.NET/PHP/JSP 或者javascript都会用到http的不同状态,一些常见的状态码为: 200 – 服务器成 ...
- JS - Promise使用详解--摘抄笔记
第一部分: JS - Promise使用详解1(基本概念.使用优点) 一.promises相关概念 promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的. ...
- DeepLearning tutorial(3)MLP多层感知机原理简介+代码详解
本文介绍多层感知机算法,特别是详细解读其代码实现,基于python theano,代码来自:Multilayer Perceptron,如果你想详细了解多层感知机算法,可以参考:UFLDL教程,或者参 ...
- springboot扫描自定义的servlet和filter代码详解_java - JAVA
文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 这几天使用spring boot编写公司一个应用,在编写了一个filter,用于指定编码的filter,如下: /** ...
- ARM Cortex-M底层技术(2)—启动代码详解
杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...
- BM算法 Boyer-Moore高质量实现代码详解与算法详解
Boyer-Moore高质量实现代码详解与算法详解 鉴于我见到对算法本身分析非常透彻的文章以及实现的非常精巧的文章,所以就转载了,本文的贡献在于将两者结合起来,方便大家了解代码实现! 算法详解转自:h ...
- ASP.NET MVC 5 学习教程:生成的代码详解
原文 ASP.NET MVC 5 学习教程:生成的代码详解 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...
- Github-karpathy/char-rnn代码详解
Github-karpathy/char-rnn代码详解 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2016-1-10 ...
随机推荐
- PHP通用分页类
Page.class.php <?php/** * 分页类 * * 调用方式: * $p=new Page(总条数,显示页数,当前页码,每页显示条数,[链接]); * print_r($p-&g ...
- Django如何启动源码分析
Django如何启动源码分析 启动 我们启动Django是通过python manage.py runsever的命令 解决 这句话就是执行manage.py文件,并在命令行发送一个runsever字 ...
- Android Activity生命周期及启动模式
曾经搞过许多东西,再熟练的东西一段时间没有碰都会生疏或忘记.后来体会到写成文档记录下来的重要性,但有些word或ppt记录下来的东西随着时间流逝会丢失,或者不愿去看.或许保存成博客的形式,会是更好的选 ...
- .Neter所应该彻底了解的委托
本文将通过引出几个问题来,并且通过例子来剖析C#中的委托以及用法,做抛砖引玉的作用 对于委托我发现大部分人都有以下问题,或者可能在面试中遇过这样的: 委托是不是相当于C/C++的函数指针? 委托究竟是 ...
- C# 自然周,月,季度计算。
/// <summary> /// 判断时间是否和服务器时间是一天 /// </summary> /// <param name="cs">&l ...
- CSS 3D图片翻转 ——3D Flipping Effect
效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- Python自动化之下拉框,隐藏标签定位 代码&报错解决
python自动化:下拉框定位方法之select标签 style="display: none;" 报错 selenium.common.exceptions.ElementNo ...
- 使用 Zookeeper 的 Api 实现服务订阅
服务提供者 服务提供者中拷贝 Constants 服务提供者中拷贝 UserService 连接 Zk 集群 /*** * 连接ZooKeeper集群 */ public ZooKeeper conn ...
- 移动开发在路上-- IOS移动开发系列 多线程一
类似于什么是进程什么是线程在这里我就不多浪费时间了(Google一下什么都有)! 废话不多说先上图,我相信大家都是喜欢看图的人,俗话说得好,求图求真相吗?虽然这里只有屌丝一个但是真相还是会有的... ...
- [Python Modules] unittest.mock
五夜光寒,照来积雪平于栈.西风何限,自起披衣看. 对此茫茫,不觉成长叹.何时旦,晓星欲散,飞起平沙雁. 在某个Python程序中看到这么一行 from unittest import mock 看起来 ...