认识异步函数

  1.  同步函数:
    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是定时器的这个函数的返回值,外部函数没有返回值
  2. 异步(Asynchronouse):不阻塞CPU,CPU先执行别的程序,这段程序被挂起,等它执行完,执行他的回调函数
  3. 目前的结论:同步函数,自己有返回值,而异步函数没有返回值(个人理解:为什么没有返回值,要拿到他的返回值肯定是有其作用,作用就是有用处,而异步函数会等其他的程序执行完在执行,所以在返回值也没有其作用了)

认识回调黑洞

  • 也叫做回调地狱,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的基本使用

  1.  原始:
    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实际运用

  1.  顺序读取文件的例子
    原始:
    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();
  2.  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();
  3.  再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契约

  1.  将大家都统一了起来
    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方便调错

  1.  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);
    })

面试题参考

  1.  只写一行语句,实现效果:
    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)的更多相关文章

  1. Java中String的intern方法,javap&cfr.jar反编译,javap反编译后二进制指令代码详解,Java8常量池的位置

    一个例子 public class TestString{ public static void main(String[] args){ String a = "a"; Stri ...

  2. HTTP协议状态码详解(HTTP Status Code)(转)

    原文链接:HTTP协议状态码详解(HTTP Status Code) 使用ASP.NET/PHP/JSP 或者javascript都会用到http的不同状态,一些常见的状态码为: 200 – 服务器成 ...

  3. JS - Promise使用详解--摘抄笔记

    第一部分: JS - Promise使用详解1(基本概念.使用优点) 一.promises相关概念 promises 的概念是由 CommonJS 小组的成员在 Promises/A 规范中提出来的. ...

  4. DeepLearning tutorial(3)MLP多层感知机原理简介+代码详解

    本文介绍多层感知机算法,特别是详细解读其代码实现,基于python theano,代码来自:Multilayer Perceptron,如果你想详细了解多层感知机算法,可以参考:UFLDL教程,或者参 ...

  5. springboot扫描自定义的servlet和filter代码详解_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 这几天使用spring boot编写公司一个应用,在编写了一个filter,用于指定编码的filter,如下: /** ...

  6. ARM Cortex-M底层技术(2)—启动代码详解

    杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...

  7. BM算法  Boyer-Moore高质量实现代码详解与算法详解

    Boyer-Moore高质量实现代码详解与算法详解 鉴于我见到对算法本身分析非常透彻的文章以及实现的非常精巧的文章,所以就转载了,本文的贡献在于将两者结合起来,方便大家了解代码实现! 算法详解转自:h ...

  8. ASP.NET MVC 5 学习教程:生成的代码详解

    原文 ASP.NET MVC 5 学习教程:生成的代码详解 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 ...

  9. Github-karpathy/char-rnn代码详解

    Github-karpathy/char-rnn代码详解 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan  2016-1-10 ...

随机推荐

  1. spring源码学习五 - xml格式配置,如何解析

    spring在注入bean的时候,可以通过bean.xml来配置,在xml文件中配置bean的属性,然后spring在refresh的时候,会去解析xml配置文件,这篇笔记,主要来记录.xml配置文件 ...

  2. 上传一个项目到GitHub

    在github上创建hello的仓库 上传本地项目文件 echo "# hello" >> README.md git init git add README.md g ...

  3. MQTT版本升级过程及源码解析

    MQTT版本升级过程及源码解析 首先说一下为什么要写这篇文章呢,在我发现网上对MQTT的文章介绍实在太少了,可能也是使用这个的频率比较低吧!还有对问题的定位以及解决的方式和办法也太少了,所以特意写这篇 ...

  4. mysql那些事(3)小数如何存储

    创建mysql数据表的时候,经常会遇到存储小数(浮点数)的情况,如:价格,重量,身高等. 目前大的公司流行三种存储方案: 1.将数据扩大10的倍数达到使用整数类型存储目的. 比如价格,我们经常以分为单 ...

  5. 一文看尽Java-并发编程知识点

    一.前言     从7月份开始一直加班比较多,一直到双11结束,博客没跟上写,接下来写一点总结性的东西,比如Java并发编程总结.Mybatis源码总结.Spring源码和基础知识总结,首先来看下并发 ...

  6. 华为云备案服务全面升级,EI助力带来极速体验

    华为云备案"电子化核验"正式发布,备案更轻松.更快捷.自2019年9月12日起,华为云用户申请办理ICP备案可以通过华为云APP进行"ICP备案主体真实身份信息采集&qu ...

  7. Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: REFERENCES command denied to user 'nali'@'localhost' for table 'dbs'

    按照教程 Install hive on Mac with Homebrew,在 mac 上安装 Hive 时, 最后执行 hive 命令后,出现错误: Exception in thread &qu ...

  8. [TimLinux] Python 修改进程显示出的标题

    1. 安装依赖 https://github.com/timscm/py-setproctitle/archive/version-1.1.10.tar.gz 2. 启动进程 import timei ...

  9. CoderForces-Round60D(1117) Magic Gems

    D. Magic Gems time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...

  10. BZOJ 3265 志愿者招募加强版(单纯形)

    3265: 志愿者招募加强版 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 848  Solved: 436[Submit][Status][Disc ...