异步与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