大纲
什么是同步
-
同步按你的代码顺序执行。直接拿到结果
- 在医院挂号，必须在那里排队等待，不能走开 <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
网友评论