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)
  })
}

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