axios实现同步请求，实现jquery async:false效果

2206人阅读 2023/3/28 15:58 总访问：769920 评论：0 收藏：0 手机

分类: 前端

如何实现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)

			}

		}

	})
```
原文：http://blog.miequan.com/archives/1592

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

axios实现同步请求，实现jquery async:false效果

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}