How to execute a synchronous Vue axios network request?


Through the previous posts, we know how to set request headers and global parameters for Vue axios. This post will introduce: How to use Vue axios to execute synchronous network request?

Keywords: Vue , axios , synchronous , network , request.

.js file method

The method for Vue axios to execute network requests needs to be written in the .js file, and then the .js file need to be imported into the .vue file. For clarity, the .js file  is named as NetWorkService.js.

					//content of NetWorkService.js
import axios from 'axios';
var base_url = "";
export default class NetWorkService {
	//post metthod
	postService(url, data) {
		var posturl = base_url + url;
		return, data, {
			'headers': {}
		}).then(res => {
			if ( == 429) {
				alert('error 429')
				return {}
		}).catch(function(err) {
			//catch error


.vue file method

We have already written NetWorkService.js to execute the network request. Now we need to import NetWorkService.js into the .vue file, instantiate NetWorkService, and then call the method in NetWorkService to execute the network request. It should be noted that in front of the function name that execute the network request, async needs to be used to turn an asynchronous request into a synchronous request.

	<div> Vue axios post example .vue</div>
	//import NetWorkService.js
	import NetWorkService from 'NetWorkService.js';
	export default {
		name: '',
		components: {
		data() {
			return {
		networkService: null,
		created() {
			//instantiate NetWorkService
			this.networkService = new NetWorkService();
		mounted() {
		methods: {
			//use async turn an asynchronous request into a synchronous request.
			async testAxiosPost() {
				var url='/test-post';
				var data={};
				//execute network request
				var resp = await this.networkService.postService(url, data);
<style scoped lang="scss">


complete .vue file


When using Vue axios to execute network requests, you need to write the request method in the NetWorkService.js file, then import and materialize NetWorkService.js in the .vue file, and finally use async to change the asynchronous request in NetWorkService.js into a synchronous request.

Related articles

Coming soon

If yuo have any question or need any help 

you can leave a comment or connect me with

Edit Template

Leave a Reply

Your email address will not be published. Required fields are marked *

Chaoxu Wei

Master student at Tongji University (Writer & Blogger)

Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me, thank you very much!


Edit Template

“There are many people in the world who want to work hard but can’t, and people who work too hard and are exhausted. Please don’t use your efforts only to chase your own victory, please use them to help others.”




Yangpu District, Shanghai