vue axios同步请求解决方案,vue-axios使用
很多时候，在构建应用程序时，您需要访问API并显示其数据。有几种方法可以做到这一点，使用基于promise的HTTP客户端axios是最流行的方法之一。本文主要介绍使用Axios通过Vue2发起请求的详细过程。有需要的可以参考一下。
目录
序言Axios的安装和配置启动简单的GET请求启动POST请求启动简单的POST请求启动POST请求并携带参数(1)启动POST请求并携带参数(2)上传文件以测试Axios配置配置baseURLtimeoutwithCredentials摘要
前言
当你读到这篇文章的时候，希望你已经知道什么是跨域请求，以及如何处理，这里就不赘述了。
本文的后台是基于Springboot2.3搭建的，控制器中不会写任何业务逻辑，只是用来配合前端调试。
控制器中使用的R.success是我自己封装的工具类，代码在文末。
Axios的安装和配置
执行项目目录中的命令来安装axios。
npm安装-S axios
打开src路径中的main.js文件，将axios依赖项引入该文件，并将其挂载到vue全局属性中。
//引用axios依赖项
从“axios”导入axios
//hang in vue，其中axios是按请求挂载的，可以使用this.request调用组件中的axios。
vue . prototype . request=axios；
get请求由axios中的GET方法调用，可以看到这个方法接收url和config对象。
发起简单GET请求
@RestController
@RequestMapping(/user )
公共类UserController {
@GetMapping(/list )
公共R列表(){
Return.success(用户列表查询成功！);
}
}
模板
div id=index
Button @click=selectList 查询用户/按钮
/div
/模板
脚本
导出默认值{
名称：“索引”，
方法：{
selectList() {
//简单的GET请求只能通过传入URL来实现
this . request . get( http://localhost:8000/user/list )。然后(res={
console.log(res ，RES)；
}).catch(e={
console.log(e ，e)；
})
}
}
}
/脚本
款式/风格
发起一个简单的GET请求并携带参数
@RestController
@RequestMapping(/user )
公共类UserController {
@GetMapping(/get )
public R get(字符串id) {
返回R.success(用户成功！);
}
}
selectOne() {
让配置={
参数：{id: 1}
}
//url后面是config对象，config对象中的params属性对应请求参数。
this . request . get( http://localhost:8000/user/get ，config)。然后(res={
console.log(res ，RES)；
}).catch(e={
console.log(e ，e)；
})
},
发起POST请求
post请求由axios中的POST方法调用，可以看到这个方法的参数列表有三个对象。
发起简单POST请求
@RestController
@RequestMapping(/user )
公共类UserController {
@PostMapping(/save )
公共R save() {
Return.success(用户添加成功！);
}
}
save() {
//发送简单的post请求和简单的get请求是一样的。您只需要将GET方法修改为POST方法。
this . request . post( http://localhost:8000/user/save )。然后(res={
console.log(res ，RES)；
}).catch(e={
console.log(e ，e)；
})
},
发起POST请求并携带参数(一)
@RestController
@RequestMapping(/user )
公共类UserController {
/**
*通常，当发起POST请求时，参数被放在请求体中，然后由@RequestBody解析。
*这里我不会创建实体类，直接用Map集合来接收。
*/
@PostMapping(/save )
public R save(@ request body MapString，String data) {
Return.success(用户添加成功！)。setAttribute(name ，data.get(username ))。setAttribute(pwd ，data . get( password ))；
}
}
save() {
let data={
用户名：“Java小学生”，
密码：“123456789”
}
//看到参数表应该能猜到。直接把对象放在第二个参数上就行了。
//需要注意的是，该方法携带的参数放在请求体中
this . request . post( http://localhost:8000/user/save ，data)。然后(res={
console.log(res ，RES)；
}).catch(e={
console.log(e ，e)；
})
},
发起POST请求并携带参数(二)
据说使用数据直接传递的参数放在请求体中，后端需要使用@RequestBody来获取。这里，参数被更改为提交的路径参数。
@RestController
@RequestMapping(/user )
公共类UserController {
@PostMapping(/save )
public R save(字符串用户名，字符串密码){
Return.success(用户添加成功！)。setAttribute(name ，用户名)。setAttribute(pwd ，密码)；
}
}
save() {
让配置={
参数：{
用户名：“Java小学生”，
密码：“123456789”
}
}
//此处不使用数据，而是使用config传递参数，或者将对象封装为params进行传递。
this . request . post( http://localhost:8000/user/save ，null，config)。然后(res={
console.log(res ，RES)；
}).catch(e={
console.log(e ，e)；
})
},
上传文件测试
除了GET和POST请求，还有PUT和DELETE请求，所以我在这里不一一测试。我们来学习一下上传文件。
@RestController
@RequestMapping(/user )
公共类UserController {
@ post mapping(/上传)
公共R上传(多文件文件，字符串文件名){
//file对象是接收到的文件，对文件的处理逻辑省略不写。
Return.success(文件上传成功！)。setAttribute(fileName ，文件名)；
}
模板
div id=index
！- input:file用于选择一个文件。选择一个文件后，change事件被触发来调用fileChange方法-
输入类型= file id= file @ change= file change /
！-执行上传文件的方法-
按钮@click=上传点击上传/按钮
/div
/模板
脚本
导出默认值{
名称：“索引”，
data() {
返回{
文件：空
}
},
方法：{
文件更改(事件){
//选择文件时会触发此方法，文件对象会存储在文件中。
this . file=event . target . files[0]；
},
上传(){
//创建一个FormData对象，把文件放进去，也可以放一些其他的参数
let data=new FormData()；
data.append(file ，this . file)；
data.append(文件名， 11223344 . txt )；
//创建一个config对象并将请求标头类型设置为multipart/form-data。
让配置={
标题：{ Content-Type : multipart/form-data }
}
//发起请求，携带刚刚创建的对象
this . request . post( http://localhost:8000/user/upload ，data，config)。然后(res={
console.log(res ，RES)；
})
}
}
}
/脚本
Axios的config配置
通过观察可以发现，Axios的请求都接收一个config对象。您可以在文件node_modules/axios/index.d.ts中查看此配置的详细信息：
配置很多，我是新人。我没碰过多少。这里我就简单测试几个其他的，随时检查。我推荐一个Axios中文网站。
baseURL
Base是一个常用的属性，可以为每个请求设置根地址。我们只需要在发起请求时注意请求路径。
脚本
导出默认值{
名称：“索引”，
data() {
返回{
配置：{
baseURL:“http://localhost:8000”
}
}
},
方法：{
测试(){
Let data={name: Java小学生 }；
this.request.post(/user/save ，data，this.config)。然后(res={
console.log(res ，RES)；
});
},
}
}
/脚本
timeout
超时也是一个常用的配置项，用于配置请求的超时。单位是ms，设置为0表示不设置超时。
脚本
导出默认值{
名称：“索引”，
data() {
返回{
配置：{
baseURL:“http://localhost:8000”，
超时：5000
}
}
},
方法：{
测试(){
Let data={name:张 }；
this.request.post(/user/save ，data，this.config)。然后(res={
console.log(res ，RES)；
});
},
}
}
/脚本
withCredentials
这个属性也是常用的。withCredentials的值为bool类型，用于设置是否允许cookies。Axios请求默认不允许携带cookies，可以通过控制器打印sessionID来测试。
脚本
导出默认值{
名称：“索引”，
data() {
返回{
配置：{
baseURL:“http://localhost:8000”，
//服务器需要配合。
withCredentials: true，
超时：5000
}
}
},
方法：{
测试(){
Let data={name: Java小学生 }；
this.request.post(/user/save ，data，this.config)。然后(res={
console.log(res ，RES)；
});
},
}
}
/脚本
Axios暂时写到这里。了解这些日常动态基本不是问题。熟悉config之后，可以尝试封装一个工具类。
总结
关于Vue2对Axios的请求这篇文章就说到这里。有关Vue2对Axios的请求的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。