001基于Vue3的Axios异步请求

一、Axios安装及应用

1、Axios是一个基于promise的网络请求库

Axios是需要单独安装的：npm install --save axios

 

创建项目 npm create vite@latest

 提示

这是在 Windows 系统的 PowerShell（PS）终端中，执行创建 Vite 项目命令时的提示信息，具体含义如下：

• PS D:\qianduan\quanduanlianxi\vue3 - axios>：这是当前所在的路径，表明你在D:\qianduan\quanduanlianxi\vue3 - axios目录下操作。
• npm create vite@latest：这是一条命令，用于通过 npm（Node Package Manager）创建一个基于 Vite 的最新版本项目。npm create是 npm 提供的创建项目的命令，vite@latest表示要创建的项目模板是 Vite，并且使用最新版本。
• Need to install the following packages: create - vite@6.3.1：提示信息说明在执行这个命令时，需要安装create-vite包，版本为6.3.1，这个包是用于创建 Vite 项目的脚手架工具。
• Ok to proceed? (y)：询问你是否同意继续进行安装操作，输入y（或Y）并回车，就会开始安装create-vite包并进入后续的 Vite 项目创建流程；如果输入其他内容，操作将被终止 。

 

这里我们输入y，安装完成

 

 写入文件名字 viteaxios

 选择Vue

 选择JavaScript

进入到项目中去

 然后是 npm install

 接下来我们就可以启动一下

点开网页看一下

 

 

 

 然后我们整理下文件

 这个文件可以删除，同时修改main.js 里面这句话删除

 

这页这样写

 

 这页这样写

 

 

看下控制台，没有报错

 

Ctrl+C停掉项目，选y

 

 

然后我们安装npm install --save axios

 

安装完成

 

2、a) 组件中引入 axios: import axios from 'axios'（局部调用axios）
案例源码：

<!--Helloworld.vue-->
<script setup>
import {onMounted,reactive} from "vue"
import axios from "axios"
import querystring from 'querystring'
const emp=reactive({
id: 0,
name:"",
address:"",
money:0.0
})
/*onMounted(()=>{
axios({
method:"get",
url:"http://localhost:8080/hello"
}).then(res=>{
emp.id=res.data.id
emp.name=res.data.name
emp.money=res.data.money
emp.address=res.data.address
console.log(res.data)
})
})*/
//需要安装querystring插件 npm install --save querystring ;
//然后引入组件：import querystring from 'querystring'

onMounted(()=>{
axios({
method:"post",
url:"http://localhost:8080/hello",
data: querystring.stringify({
id:100,
name:"李四",
money:10000.0,
address:"河南周口"
})
}).then(res=>{
emp.id=res.data.id
emp.name=res.data.name
emp.money=res.data.money
emp.address=res.data.address
console.log(res.data)
})
})

axios.post("http://localhost:8080/hello",querystring.stringify({
id:100,
name:"李四",
money:10000.0,
address:"河南周口"
})).then(res=>{
emp.id=res.data.id
emp.name=res.data.name
emp.money=res.data.money
emp.address=res.data.address
console.log(res.data)
})
</script>

<template>
<p>welcome to Axios</p>
<p><span>{{ emp.id }}---{{ emp.name }}---{{ emp.address }}---{{ emp.money }}</span></p>
</template>

<style lang="scss" scoped>

</style>

 

 

<!--App.vue-->
<script setup>
import Helloworld from './components/Helloworld.vue'
</script>

<template>
<Helloworld />
</template>

<style scoped>

</style>

 

后台基于Springboot的核心代码如下：

```java
package com.qst.springbootredis.controller;
import com.qst.springbootredis.pojo.Emp;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
* @thuthor dewey
* @Date 2024/3/7/9:45
*/
@RestController
@CrossOrigin
public class HelloController {
/* @RequestMapping("/hello")
public Emp hello(){
System.out.println("axios***************");
Emp emp=new Emp();
emp.setId(2);
emp.setName("张三");
emp.setMoney(8000.0);
emp.setAddress("河南罗友");
return emp;
}*/
@RequestMapping("/hello")
public Emp hello( Emp e){
System.out.println("axios***************");
Emp emp=e;
/*Emp emp=new Emp();
emp.setId(2);
emp.setName("张三");
emp.setMoney(8000.0);

emp.setAddress("河南罗友");*/
return emp;
}
}

 

准备一个后端数据

用get方式： 

现在我们准备发送请求了，通过一个周期函数Mounted

 

 

如果想让他显示我们可以声明一个显示的东西reactive

 

 

启动项目

 

可以看到打开之后：

 可以看到打印出来了，接下来我们让他显示出来

 

 

用post方式：

安装插件 npm install --save querystring

 安装完

 引入插件

 就可以这样写

 还可以这样写，效果是一样的（get也可以写成这个样子的）

 还可以这样写（get也可以写成这个样子的）

 

b) 全局引入 (main.js):

import { createApp} from 'vue'
import App from './App.vue'
import axios from 'axios'
const app=createApp(App)
//app.config.globalProperties.$axios=axios
app.provide("axios",axios)
app.mount('#app')

// 注：在组件中调用时：let axios=inject (axios)

 

案例如下:

<script setup>
import {onMounted,reactive,inject} from "vue"
//import axios from "axios"
import querystring from 'querystring'
let axios=inject("axios")
alert(axios)
const emp=reactive({
id: 0,
name:"",
address:"",
money:0.0
})

onMounted(()=>{
axios.post("http://localhost:8080/hello",querystring.stringify({
id:100,
name:"李四",

money:10000.0,

address:"河南周口"
})).then(res=>{
emp.id=res.data.id
emp.name=res.data.name
emp.money=res.data.money
emp.address=res.data.address
console.log(res.data)
})
})
</script>

<template>
<p>welcome to Axios</p>
<p><span>{{ emp.id }}---{{ emp.name }}---{{ emp.address }}---{{ emp.money }}</span></p>
</template>

<style lang="scss" scoped>

</style>

 

 我们只需要改一下这里

 还有这里就是全局引用了