ajax异步请求，以及ajax异步返回的数据的处理方案

为什么JS会有同步任务和异步任务：
js是单线程，会按照顺序执行一个一个的任务，如果遇到某个任务像网络请求一类的需要延长执行回调函数，那么页面就会阻塞，所以引入了异步的概念。

同步任务：同步任务不需要进行等待可立即看到执行结果，比如console
异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求

为什么要监听异步任务：
不是所有异步任务都像定时器一样按时完成，所以我们通过消息队列（事件监听），监听异步任务的状态，如果已经可以执行回调函数，则将其放入事件队列（主线程执行栈）

异步任务中的宏任务和微任务：
微任务是存在于宏任务下的需要优先执行的任务。
遇到宏任务将其加入宏任务队列，微任务则立即执行
每当一个宏任务执行完，就将执行微任务队列中的所有任务。
即同步任务>异步任务（微任务>宏任务）

宏任务：HTML解析、鼠标事件、键盘事件、网络请求、执行主线程js代码和定时器（new Promise(xxx)中xxx是同步代码）

微任务：promise.then，dom渲染

异步数据的处理方案：
1、回调函数
2、promise
3、事件监听
4、发布/订阅(观察者模式)

ajax异步请求的实现：
核心对象XMLHttpRequset
步骤：
1、创建xhr实例对象
2、xhr.open（method,url,async）设置连接的参数
3、xhr.setRequestHeader（）设置发送数据的头部
4、xhr.send（数据）发送请求
5、监听readystate状态码

<script type="text/javascript">function ajax(){var xhr =new XMLHttpRequest()xhr.open('POST','http://rap2api.taobao.org/app/mock/287968/login/745595613',true)xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send("username=1&password=2")xhr.onreadystatechange = function(){console.log('xhr状态码：',xhr.readyState)if(xhr.readyState === 4){if(xhr.status === 200){console.log('返回的数据：',xhr.responseText)}}}}</script>

一、利用回调函数处理ajax异步返回的数据

<script type="text/javascript">function ajax(fn){var xhr =new XMLHttpRequest()xhr.open('POST','http://rap2api.taobao.org/app/mock/287968/login/745595613',true)xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send("username=1&password=2")xhr.onreadystatechange = function(){//console.log('xhr状态码：',xhr.readyState)if(xhr.readyState === 4){if(xhr.status === 200){//console.log('返回的数据：',xhr.responseText)return fn(xhr.responseText)}}}}console.log('同步操作')ajax((data)=>console.log('回调完成',data))</script>

二、利用promise代替回调函数
promise可以解决回调地狱问题（回调函数多层嵌套）
promise包含三种状态
pending、fulfilled、rejected

function request(method,url,data=''){return new Promise((resolve,reject)=>{var xhr = new XMLHttpRequest()xhr.open(method,url,true)xhr.send(data)xhr.onreadystatechange = () => {if(xhr.readyState === 4){if(xhr.status === 200){resolve(xhr.responseText)}else reject('出错')}}})}const fn = () => request('POST','http://rap2api.taobao.org/app/mock/287968/login/745595613')fn().then((data)=>{console.log('执行了then方法',data)}).catch(err =>{console.log(err)})

三、axios也是ajax的封装，并包含promise中的API

ajax异步请求，以及ajax异步返回的数据的处理方案相关推荐

网页上ajax异步加载数据,网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 var xmld=new XMLHttpRequest(); xmld.open("GET","wan. ...
php处理异步请求_php的异步请求操作
php的异步请求操作 PHP #异步请求2012-04-15 00:21 在很多情况下,有这样的一个需求:让php在后台执行某个程序,但要让页面快速的输出显示. 以下是我总结的几种实现方式 exec ...
java 微信报关_微信开放平台,_请求微信报关接口返回的数据，微信开放平台 - phpStudy...
请求微信报关接口返回的数据请求微信报关接口错误 552E051CB6F4DBC6029B8218DBD5A52A gh_4dbf09a0a18e 1342661701 20160825113538 ...
ajax 同步异步true,async: false 实现AJAX同步请求（ $.ajax同步/异步（async:false/true））(示例代码)...
虽然说ajax用来执行异步请求的比较多,但有时还是存在需要同步执行的情况的. 比如:我需要通过ajax取执行请求以返回一个值,这个值在ajax后面是需要使用到的,这时就不能用异步请求了.这时候就需要使 ...
ajax发送异步请求与ajax发送同步请求
async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. ajax发 ...
form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题
1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...
ajax发送请求-同步和异步
2019独角兽企业重金招聘Python工程师标准>>> function ajaxTest(){ var loginId="will"; var url=&quo ...
ajax顺序请求你,ajax请求之返回数据的顺序问题分析
这篇文章主要介绍了ajax请求之返回数据的顺序问题,结合实例形式分析了ajax请求返回值的排序问题,需要的朋友可以参考下本文实例分析了ajax请求之返回数据的顺序问题.分享给大家供大家参考,具体如下 ...
Ajax入门-搭建服务器并使用ajax技术向服务器发送一个请求并获得服务器返回的数据
今天刚入坑学习ajax,刚开始就遇到服务器这一知识盲区,经过解决各种问题,成功运行的代码,下面就分享给你们,希望能够帮你们解决问题. (一)node.js安装 1.进入官网,下载对应版本 2.下载了. ...

ajax异步请求，以及ajax异步返回的数据的处理方案

ajax异步请求，以及ajax异步返回的数据的处理方案相关推荐

最新文章

热门文章