The use of axios to send asynchronous requests and the use of async and await keywords in the vue scaffolding project

Use axios to send asynchronous requests in vue scaffolding project

First, you need to install axios in the scaffolding project, the installation command is as follows:

Then you need to configure axios globally in main.js, because when you use axios in a component, you can’t import axios as in the .js file, that is

import axios from'axios', you can use axios directly after importing, such as axios.get(...).then(); when using axios in the main.js file as shown below:

If you write import axios from "axios" statement in the component, an error will be reported, as shown below:

Therefore, if you want to use axios in a component, you must first mount axios globally, and configure it as shown below:

Then use this.$http.get() to perform ajax operation in a component, as shown below:

The post method can be used. The reason why the above figure can’t be used is because the way of passing parameters is incorrect. The correct way of passing values ​​when using the post method is as shown in the figure below:

Either {params:{name:"张三",age:18}} in the get method to pass parameters or "welcome?name='lisi'&age=19" in the post method to pass parameters , In the springboot backend, you can receive the parameters from the front end through @RequestParam annotation, as shown below:

When the springboot backend needs to use the @RequestBody annotation to convert the json string from the front end into a java bean object, the get asynchronous request method I tested currently cannot pass the json object data and can only be passed by the post asynchronous request method as shown below:

The normal way of passing parameters is as follows: The way of passing parameters
using json objects is as follows:

What I understand at present is that if the front-end parameters want to be passed to the back-end through the json object, the asynchronous request method must be post, not It is the get asynchronous request method. If you understand it incorrectly, please correct me! ! !

If the data from the front end is in json string format, the way to receive parameters in springboot is as follows:

Simply understand how the async and await keywords are used

Let me talk about the usage of the async (asynchronous) keyword. It is placed in front of the function as a keyword to indicate that the function is an asynchronous function, because async means asynchronous, and asynchronous function means that the execution of the function is not Will block the execution of the code behind. Then the statement in the asynchronous method that needs to be waited for execution needs to be preceded by await. Such as:

/*
	此段代码的整体意思：
		this.$http.get会发送一个ajax异步请求，然后程序会等待此语句的执行，但是不会影响后面语句的执行，这就叫做异步方法，
		async关键字表示test方法是一个异步方法，然后只有被async修饰的异步方法内部才能够使用await关键字，此关键字是async wait		的缩写，表示会等待此句代码的执行，并且不会影响test异步方法后面的代码的执行。
	代码执行后，你会发现console.log("虽然我在后面，但是我先输出了");这句代码先输出，而console.log(result);后输出 
*/
async function test(){
    
    
    await this.$http.get("hello")
        .then(result=>{
    
    
            console.log(result);
        });
}
console.log("虽然我在后面，但是我先输出了");