axios实现同步请求

  • A+
所属分类:js vue 前端

如何实现ajax请求的同步?

通过jquery发送,将async属性设置为false,这样就会发送同步请求

在axios中,所有的请求都是异步发送的。所以单独用axios是实现不了同步的,需要结合async与await关键字使用。

var data = {}

axios.get("./data1.json")

.then(res => data = res.data)

console.log(data)

如果我们的代码是这个顺序,则data还是个空对象,是获取不到的。

async 与 await

async是修饰函数的,async修饰的函数的返回值是promise对象,这个promise对象的状态与值具体要看被修饰的函数的返回值,如果被修饰的函数的返回值为非promise对象,那该函数返回的promise对象的状态为成功,成功的值就是返回值,如果被修饰的函数返回的是一个promise对象,则的返回的promise对象的值与状态由函数return后的promise对象的状态和值决定。

await 必须用在async函数中,await 后修饰的是一个promise对象,await返回的值,就是promise对象成功的值。

async function init(){

var data = {}

var res = await axios.get("./data1.json")

data = res.data

console.log(data)

}

init()

这样axios请求就成了同步的,axios请求本身返回的就是一个promise对象,await语句可以将promise对象成功的值返回出去,也就是这里的res就是axios请求成功的值。

这样就可以同步获取结果了。

在vue中可以这样用

new Vue({

methods:{

async listData(){

var res = await axios.post(xxxx)

console.log(res)

}

}

})

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: