异步与Promise

大纲

什么是同步

  • 同步按你的代码顺序执行。直接拿到结果

    • 在医院挂号,必须在那里排队等待,不能走开 <a name="AmbBl"></a>

需要设置同步吗?

  • 不需要设置同步,因为主动设置为导致请求页面时卡主 <a name="Rfz0z"></a>

什么是异步

异步不按照代码顺序执行,异步的执行效率更高。不能直接拿到结果。

  • 现在开始执行的函数,会在一段时间执行才完成?

  • 餐厅拿号后,可到外面去逛街

  • 可以每10分钟去餐厅问一下(轮询)

  • 可以扫码用微信接受通知(回调) <a name="Q1Ttg"></a>

异步程序的顺序是什么?

  • 异步任务不能拿到结果

  • 将回调函数作为参数给异步任务

  • 异步任务完成时调用回调

  • 调用时把结果作为参数 <a name="wBu2U"></a>

异步在什么时候会使用

  • 从网络获取文件

  • 访问数据库

  • 从网络摄像头获得视频流

  • 或者向VR头罩广播图像 <a name="GbE2c"></a>

什么是回调

  • 回调函数是一个作为参数传给另一个JavaScript 函数的函数, 这个回调函数会在传给的函数内部执行。(例如下图的f1函数作为参数传给了f2,然后f2中再调用f1这个参数)
image.png
  • 如果f2没有调用f1呢?(如果没有调用,那么就没有必要把函数作为参数啊。回调函数的最终目的就是调用它)

  • 如果传给f2的参数不是函数呢(会报错,提示参数不是函数)

回调有什么缺点?

  • 不够规范

    • 不同程序员名称不一样,比如有的叫做fail,有的叫做error
  • 容易造成回调地狱

Image.png
  • 很难进行错误处理

如何判断是同步还是异步

查看一个函数的返回值处于下面各种函数之内,就是异步函数

  • setTimeout

  • Ajax

  • AddEventListener

摇色子,如何得到异步的结果

  • 用回调函数
image.png

如果异步任务有两个结果如何操作

方法一:回调接受两个参数

image.png

方法二:放入两个回调

一个对象中两个key
image.png

直接放入两个回调函数
image.png

用回调函数封装Ajax

image.png

什么是Promise?

简单说就是一个容器,里面保存着某个未来才会结束的事件

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

如何用Promise封装Ajax呢?

  • 任务成功调用resolve函数

    • resolve会调用then后面的第一个参数
  • 任务失败调用reject函数

    • reject会调用then后面的第二个参数
image.png

上面这样封装ajax的缺点

  • post无法上传数据(因为我在request.sent()中没有写入具体的内容)

  • 不能设置请求头request.setRequestHeader(key, value)

如何解决这个问题呢?
  • 使用jQuery.ajax(不推荐)

  • 使用axios

为什么推荐使用axios?

  • 支持更多形式的参数

  • 支持Promise

  • 支持的更多的功能

    如何学习axios
    • 写博客介绍

    • 通过项目学习

axios的高级用法

  • JSON自动处理

    • 如果发现响应的Content-Type是json

    • 就会自动调用JSON.parse

    • 所以需要正确设置Content-type

  • 请求拦截器

    • 比如加查询参数
  • 响应拦截器

    • 在响应中加些东西,甚至改内容
  • 可以生成不同实例(对象)

    • 不同的实例可以设置不同的配置,用于复杂场景

如何使用axios

  • 在BootCdn里面找到

  • 放置到script中

  • 然后在自己的js文件中就可以使用了(注意要放置在axios的下面)

  • 发出去了,看下面的xxx

Image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,706评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,002评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,462评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,375评论 0 216
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,763评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,849评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,033评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,768评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,490评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,734评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,204评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,566评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,227评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,137评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,934评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,926评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,774评论 2 274

推荐阅读更多精彩内容

  • 异步和同步 (混淆了异步和回调) 如果能直接拿到结果,即为同步 例如:在医院挂号,拿到号码才离开窗口同步任务可能消...
    yudaza阅读 271评论 0 0
  • 什么是异步?什么是同步 异步 如果能直接拿到结果 ----> 同步 比如在医院挂号,拿了号才会离开窗口拿不到结果是...
    半栈阅读 338评论 0 1
  • 同步和异步 同步:直接能拿到结果 异步:不能直接拿到结果 判断一个函数是同步的还是异步 如果函数处于 setTim...
    Shigure_Rain阅读 128评论 0 0
  • 概述 Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(p...
    nucky_lee阅读 931评论 0 1
  • JavaScript里通常不建议阻塞主程序,尤其是一些代价比较昂贵的操作,如查找数据库,下载文件等操作,应该用异步...
    张歆琳阅读 2,700评论 0 12