【前后分离】异步与Promise(下)

345 阅读4分钟

我的GitHub主页

异步与Promise(下)

1.异步是什么?

在了解异步之前,我们搬出同步。

o. 如果直接可以拿到结果,那就是同步。

比如你在医院挂号,你拿到号才会离开窗口。

  • 同步任务可能消耗10毫秒,也可能需要3秒
  • 总之不拿到结果你是不会离开的,就是我们说的死磕。

o. 如果不能直接拿到结果,那就是异步

比如你在餐厅门口等位,你拿到号可以去逛街 什么时候才能真正吃饭呢?

  • 你可以每10分钟去餐厅问一下(轮询)
  • 你也可以扫码用微信接收通知(回调)

2.什么是回调?

写了却不调用,给别人调用的函数,就是回调

「回头你调用一下呗」 就像有人和你说,回头借我联盟账号使使呗,大家都懂,肯定不是立刻就要借,是以后/未来要借,

异步举例子

异步和回调的关系

关联

异步任务需要在得到结果时通知JS来拿结果怎么通知呢?

  1. 可以让JS写留一个函数地址(电话号码)给浏览器
  2. 异步任务完成时浏览器调用该函数地址即可(拨打电话)
  3. 同时把结果作为参数传给该函数(电话里说可以来吃了)
  4. 这个函数是我写给浏览器调用的,所以是回调函数

区别

  1. 异步任务需要用到回调函数来通知结果
  2. 但回调函数不一定只用在异步任务里
  3. 回调可以用到同步任务里
array.forEach(n=>console.log(n))就是同步回调

那问题来了,我特么怎么知道一个函数是同步的还是异步,很简单,根据特征或者文档

判断同步异步

如果一个函数的返回值处于:

  1. setTimeout
  2. AJAX(即XMLHttpRequest)
  3. AddEventListener

这三个东西内部,那么这个函数就是异步函数,如果还有其他API是异步的,会另行说明

等下

我听说AJAX可以设置为同步的

答:傻×前端才把AJAX设置为同步的,这样做会使请求期间页面卡住。

最后,我们再来总结一下这个过程:

  • 异步任务不能拿到结果
  • 于是我们传一个回调给异步任务
  • 异步任务完成时调用回调
  • 调用的时候把结果作为参数
  • 希望你已经理解上面过程

3.回调哪三个问题:地狱,名字,错误处理?

这三点,这样解释,地狱就是回调了很多很多次,想想波动拳,名字的话,就是代表成功和失败的额两个函数,有各种各样的命名方法,让人很乱;错误处理就是很多时候你没法callback

4.Promise是什么:1976年的一种设计模式

以上节写的AJAX 的封装方法为例来解释Promise

我们先对成功失败调用改写

然后再对其请求改写

5.如何使用Promise:背下这五个单词即可,等你用熟了··

return new Promise((resolve,reject)=>{})

* 第1步

return new Promise((resolve,reject)=>{})

  • 任务成功则调用resolve(result)
  • 任务失败则调用reject(error)
  • resolve和reject会再去调用成功和失败函数

* 第2步

使用.then(success,fail)传入成功和失败函数,点到为止,我们先讲到这里,Promise还有高级用法,以后我们再说!

6.我们在第4点里面封装的AJAX的缺点,他就是一坨屎

A:post无法上传数据

request.send(这里可以上传数据)

B:不能设置请求头

request.setRequestHeader(key,value)

那怎么解决呢?

  • 花时间把 ajax 写到完美(有时间可以做)
  • 使用 jQuery.ajax(这个可以)
  • 使用 axios(这个库比 jQuery 逼格高)推荐!

7.如何使用axios:发个请求试用看看?

目前最新的AJAX库,显然它抄袭了 jQuery 的封装思路

我记得 axios 的 API 吗?

不记得,但是我写了一篇 博客

通过这个博客我们可以快速了解axios的用法,推荐大家也可以通过写博客来学习一个库!

Promise是前端解决异步问题的统一方案

由于本人水平有限,如有描述不准确的地方请给我留言,欢迎交流~