JavaScript实现同步Ajax请求的两种方式

JavaScript的Ajax请求默认是异步的，有以下两种方式能让Ajax请求变成同步

方式一

使用ES7的Async和Await

async function main(){const env = await queryEnv('141001')console.log(env)
}async function queryEnv (platform) {const result = await axios({url: '/chronic/userPlatformConfig/getBaseInfo',params: { platform: platform },method: 'post',headers: {'Content-Type': 'application/x-www-form-urlencoded'}})return result
}main()

方式二

使用原生的XmlHttpRequest发送同步请求，xhr.open的第三个参数为false表示同步请求

function main () {const env = queryEnv('141001')console.log(env)
}function queryEnv (platform) {const xhr = new XMLHttpRequest()const url = '/chronic/userPlatformConfig/getBaseInfo'xhr.open('post', url, false) // 同步请求xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')xhr.send('platform=' + platform)const res = JSON.parse(xhr.responseText)return res.body
}main()

比较

方式一使用ES7的语法Async/Await将本来是异步的Ajax请求转换成同步的请求，方式二本身就是同步请求。

方式一不好的地方是若queryEnv这个函数被嵌套多层调用，每个调用的地方都要加上Async/Await，被多层嵌套时，代码阅读和debug都有不方便。
好处是queryEnv这个函数可以随时在同步异步间进行转换，上述示例是同步函数，若要转换成异步，使用then即可。

function main(){queryEnv('141001').then(env => {console.log(env)})
}

方式二的好处是调用放的代码逻辑写起来很顺畅，方便阅读，不怕多层嵌套；但不能像方式一那样同步异步转换，若要转换需要再加个函数或者是增加是否异步这个参数。

JavaScript实现同步Ajax请求的两种方式相关推荐

javascript消除字符串两边空格的两种方式，面向对象和函数式编程。python oop在调用时候的优点...
主要是javascript中消除字符串空格,比较两种方式的不同 //面向对象,消除字符串两边空格 String.prototype.trim = function() { return this.re ...
探讨Netty获取并检查Websocket握手请求的两种方式
在使用Netty开发Websocket服务时,通常需要解析来自客户端请求的URL.Headers等等相关内容,并做相关检查或处理.本文将讨论两种实现方法. 方法一:基于HandshakeComplet ...
JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
jquary发送ajax请求的三种方式
ajax= Asynchronous JavaScript and XM (异步JavaScript和XML),通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新,可以在不重新加载整 ...
原生AJAX以及JQuery发送AJAX请求的几种方式
JSON&AJAX 文章目录 JSON&AJAX 1. JSON 1.1 json概述 1.2 Json使用 3. 原生AJAX 4. JQuery的AJAX 4.1 GET请求方式 ...
Vue3（撩课学院）笔记09-axios简介，发起get请求的两种方式，发起带参的get及post请求，发起并发请求，并发请求结果将数组展开，axios全局配置，axios配置及封装，请求和响应拦截
1.axios简介 axios是基于promise可以用于浏览器和node.js的网络请求库,在服务器端使用原生node.js,在浏览气短使用ajax(即XMLHttpRequests) 2.axio ...
java发送http get请求的两种方式
长话短说,废话不说一.第一种方式,通过HttpClient方式,代码如下: public static String httpGet(String url, String charset)throw ...
ajax上传图片的两种方式
原文地址:https://www.cnblogs.com/ailingfei/p/6744759.html 第一种formData var formData = new FormData($( &qu ...
.Net Core下发送WebRequest请求的两种方式
1.使用RestSharp.NetCore 2.使用WebApi请求方式转载于:https://www.cnblogs.com/mailaidedt/p/6525501.html

JavaScript实现同步Ajax请求的两种方式

方式一

方式二

比较

JavaScript实现同步Ajax请求的两种方式相关推荐

最新文章

热门文章