vue脚手架项目中使用axios发送异步请求以及async和await关键字的使用

vue脚手架项目中使用axios发送异步请求

首先需要脚手架项目中安装axios,安装命令如下图：

然后需要在main.js中对axios全局配置，因为在组件中使用axios的时候不能像在.js文件中那样，可以先导入axios,即

import axios from ‘axios’，导入之后可以直接使用axios,如axios.get(…).then();在main.js文件中使用axios时如下图：

在组件中如果写import axios from "axios"语句会报错，如下图：

因此如果想要在组件中使用axios的话，必须要先在全局挂载axios,配置如下图：

然后再某个组件中使用this.$http.get()进行ajax操作，如下图：

post方式可以用，上图中之所以不能用是因为传递参数的方式不对，使用post方式时正确的传值方式如下图：

无论是使用get方式时的{params:{name:“张三”,age:18}}传参方式还是使用post方式时的"welcome?name=‘lisi’&age=19"这种传递参数的方式，在springboot后端都可以通过@RequestParam注解接收前端传来的参数，如下图：

当springboot后端需要使用@RequestBody注解把前端传来的json字符串转变成java bean对象的时候，目前我测试的get异步请求方式不能传递json对象数据只能够用post异步请求方式传递如下图：

普通的传递参数的方式如下图：
使用json对象传递参数的方式如下图：

目前我理解的是，凡是如果前端参数想要通过json对象传递到后端，那么异步请求的方式必须要是post方式，不能是get异步请求方式，如果理解有误，还请各位大佬纠正！！！

前端传来的如果是json字符串格式的数据，在springboot接收参数的方式如下图：

简单理解async和await关键字是如何使用的

先说一下async（异步的）关键字的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。然后异步方法内的需要等待执行的语句前面需要加上await。如：

/*
	此段代码的整体意思：
		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("虽然我在后面，但是我先输出了");