前端——异步同步

目录

一、什么是同步/异步任务？

二、为什么会出现异步问题？

三、常见的异步问题及其解决方法。

1、Ajax请求

2、Axios

3、Promise优化异步

一、什么是同步/异步任务？

同步任务：指的是在主线程上排队执行的任务，只有当前一个任务执行完毕后才可执行下一个任务。（keyword：按顺序，自上而下）
异步任务：指的是不进入主线程，而进入任务队列的任务。只有当任务队列通知主线程某个异步任务可以执行，方可进入主线程进行执行。（keyword：通知主线程后方可执行）

二、为什么会出现异步问题？

• 由于JavaScript是一门单线程语言，即同一时间只能做一件事；
• JS本身是同步执行；
• 但在执行耗时操作时为了避免阻塞后续代码的执行，通常采用异步操作；
• 通过事件循环(event loop)实现异步。

异步操作会导致：如果下一个函数需要未执行完成的当前函数中的元素，由于当前函数未对该元素进行处理，而异步使得下一个函数先执行，自然导致下一个函数中获取的该元素为空。辅助代码如下：

3. // 代码执行结果：
4. // B:undefined
5. // A:100

         如果不存在异步，即：先执行A()，浏览器等待3s后，对window.data赋值，再输出window.data的值；再执行B()
        目前存在异步使得，先执行B()，再执行A()。因为setTimeout中的函数没有立即执行，而是延迟了一段时间，所以可知，A中存在异步任务--》B函数先执行。将A放入任务队列中，等待同步任务和任务队列现有的事件实行完才会执行。

三、常见的异步问题及其解决方法。

1、Ajax请求

通过Ajax发送网络请求时由于网络延迟，会导致异步问题产生。解决方法如下：

• asynchronous=>异步，故取值为true时，该请求异步执行，false时同步执行。

1. $.ajax({
2. //获取用户收藏列表
3. url: xxxxx//请求的端口
4. dataType: "json",
5. async: false,//false代表同步执行，true代表异步执行
6. type: "POST",
7. success: function (result) {
8. if (result.status == 200) {
9. //请求成功的操作
10. } else {
11. //后端接口返回失败的操作
12. }
13. },
14. fail: function () {
15. //请求失败的操作
16. }
17. error: function () {
18. //请求发生错误的操作
19. }
20. });

• 写函数时理清逻辑顺序，请求成功后，再调用后续函数。弊端：会造成层层嵌套

1. $.ajax({
2. //获取用户收藏列表
3. url: xxxxx//请求的端口
4. dataType: "json",
5. type: "POST",
6. success: function (result) {
7. if (result.status == 200) {
8. //请求成功的操作
9. A();//请求成功后再执行操作
10. B();
11. } else {
12. //后端接口返回失败的操作
13. }
14. },
15. fail: function () {
16. //请求失败的操作
17. }
18. error: function () {
19. //请求发生错误的操作
20. }
21. });

2、Axios

基于promise的HTTP轻量级库，可以不需要引入Jquery.js。

1. async f() {
2. var result = {};
3. var param = ####
4. var url = ####
5. await axios.post(url, param).then(function (res) {
6. if (res.status == 200) {
7. result = res.data.data;//根据接口返回的数据进行赋值
8. } else {
9. alert("获取失败！");
10. }
11. });
13. },

async、await：Promise的语法糖；此处使用async是为了令f()声明为异步函数，await用于等待异步结果。语法上规定await只能出现在async中。通过二者搭配，使得该函数运行完成后才可运行其它函数，即实现同步。

3、Promise优化异步

补充知识：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果的返回值

利用Promise可以避免层层嵌套的回调函数

1. function A() {
2. return "成功111";
3. }
4. var myFirstPromise = new Promise(function (resolve, reject) {
5. //当异步代码执行成功时调用resolve(...), 当异步执行代码失败时调用reject(...)
6. //此处使用setTimeout(...)模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
7. setTimeout(function () {
8. resolve(A()); //代码成功执行
9. }, 250);
10. });
12. myFirstPromise.then(function (successMessage) {
13. //successMessage的值是上面调用resolve(...)方法传入的值.
14. //successMessage参数不一定非要是字符串类型，这里只是举个例子
15. document.write(successMessage);
16. document.write("Yay! ");
17. });

由于Promise.prototype.then方法返回的是一个新的Promise对象，因此可采用链式写法，按顺序依次调用。

1. getJSON("/posts.json").then(function (json) {
2. return json.post;
3. }).then(function (post) {
4. // proceed
5. });

第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

如果前一个回调函数返回的是Promise对象，这时后一个回调函数就会等待该Promise对象有了运行结果，才会进一步调用。（横向发展改为向下发展）

文章摘自  前端学习-同步异步问题_前端异步请求和同步请求-CSDN博客  ，并非本博主原创，学习过程中重录加深印象！