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',await和async使用方法
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.sponseText)
return res.body
}
main()
⽐较
⽅式⼀使⽤ES7的语法Async/Await将本来是异步的Ajax请求转换成同步的请求，⽅式⼆本⾝就是同步请求。
⽅式⼀不好的地⽅是若queryEnv这个函数被嵌套多层调⽤，每个调⽤的地⽅都要加上Async/Await，被多层嵌套时，代码阅读和debug都有不⽅便。
好处是queryEnv这个函数可以随时在同步异步间进⾏转换，上述⽰例是同步函数，若要转换成异步，使⽤then即可。
function main(){
queryEnv('141001').then(env =>{
console.log(env)
})
}
⽅式⼆的好处是调⽤放的代码逻辑写起来很顺畅，⽅便阅读，不怕多层嵌套；但不能像⽅式⼀那样同步异步转换，若要转换需要再加个函数或者是增加是否异步这个参数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。