ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue底子知识总结（2）--- axios的使用 [打印本页]

作者: 万有斥力 时间: 2024-8-18 21:21
标题: vue底子知识总结（2）--- axios的使用
目录
一.下载Vue3：
二.Vue3使用axios举行前后端毗连：
1.起首安装axios：
2.axios的根本使用：
（1）什么是axios：
（2）使用axios发送Get哀求：
（3）使用axios发送Get哀求的实例：
（4）创建.js文件封装函数：
（5）axios.create({baseURL})的使用：
三.axios的拦截器：

一.下载Vue3：

我们可以通过按照官网的步骤下载：开始 | Vite 官方中文文档 (vitejs.dev)
选择自己想要下载的项目文件夹，cmd回车打开命令栏，执行：

cnpm init vue@latest

复制代码

然后等待一会就可以创建一个项目，并更改项目名：

√ 请输入项目名称： ... vue-project

复制代码

之后按照提示输入对应的语句：

cd vue-project
cnpm install

复制代码

我们等待几秒Vue3项目就乐成创建出来了，之后进入NPM脚本框输入 npm run dev 或点击 dev 旁边的按钮就可以直接运行程序，之后我们就可以去检察Vue3的项目了。

下面是vite设置官网地址：设置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)
二.Vue3使用axios举行前后端毗连：

1.起首安装axios：

输入cnpm install axios来下载axios依赖：

2.axios的根本使用：

下面是axios官网链接：Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)
（1）什么是axios：

Axios 是一个基于 promise 网络哀求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
（2）使用axios发送Get哀求：

下面是使用axios发送Get哀求的两种根本格式：

//使用之前需要导入axios
import axios from 'axios';
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// 总是会执行
});

复制代码

（3）使用axios发送Get哀求的实例：

起首我们创建一个Vue3项目，并下载导入axios。
然后我们想让我们artical.vue项目表现就需要导入到App.vue中：

<script setup>
import ArticalVue from './components/Artical.vue'
</script>
<template>
<ArticalVue/>
</template>

复制代码

之后我们就开辟我们的Artical.vue代码：

<template>
<div>
文章分类: <input type="text" v-model="searchConditions.category">
发布状态: <input type="text" v-model="searchConditions.state">
<button @click="search">搜索</button><br /> <br />
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(article,index) in articleList">
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import axios from 'axios';
import { ref } from 'vue';
//定义响应式数据 articleList
const articleList = ref([]);
//发送请求获取所有文章数据
axios.get('http://localhost:8080/article/getAll')
.then(result=>{
//保存数据
articleList.value = result.data;
}).catch((err)=>{
console.log(err);
});
//定义响应式数据 searchConditions
const searchConditions = ref({
category: '',
state: ''
})
//声明search函数
const search = function(){
//发送请求完成搜索
axios.get('http://localhost:8080/article/search',{params:{...searchConditions.value}})
.then(result=>{
articleList.value = result.data;
})
.catch((err)=>{
console.log(err);
})
}
</script>

复制代码

我们再来开辟我们的后端代码举行联调测试：

@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {
private List<Article> articleList = new ArrayList<>();
{
articleList.add(new Article("医疗反腐绝非砍医护收入", "时事", "2023-09-5", "已发布"));
articleList.add(new Article("中国男篮缘何一败涂地", "篮球", "2023-09-5", "草稿"));
articleList.add(new Article("华山景区已受大风影响阵风达7-8级", "旅游", "2023-09-5", "已发布"));
}
//新增文章
@PostMapping("/add")
public String add(@RequestBody Article article) {
articleList.add(article);
return "新增成功";
}
//获取所有文章信息
@GetMapping("/getAll")
public List<Article> getAll(HttpServletResponse response) {
return articleList;
}
//根据文章分类和发布状态搜索
@GetMapping("/search")
public List<Article> search(String category, String state) {
return articleList.stream().filter(a -> a.getCategory().equals(category) && a.getState().equals(state)).collect(Collectors.toList());
}
}

复制代码

之后我们运行效果就是下面的图片：

但是这里有个标题，如果我们要是在别的.vue文件频繁的调用我们这个查询搜刮的axios代码，显然很繁琐，难以复用，这个时候我们就需要将接口调用的js代码封装到.js文件中并以函数的形式暴露给外部。
（4）创建.js文件封装函数：

我们一般会再src/api/_.js这样的目录下创建article.js文件：

//导入axios
import axios from 'axios';
//暴露函数：在function前加上export
export function articleGetAllService(){
//发送请求获取所有文章数据
axios.get('http://localhost:8080/article/getAll')
.then(result=>{
//返回数据
return result.data;
}).catch((err)=>{
console.log(err);
});
}
export function articleSearchService(conditions){//传入conditions参数
axios.get('http://localhost:8080/article/search',{params: conditions})
.then(result=>{
//返回数据
return result.data;
})
.catch((err)=>{
console.log(err);
})
}

复制代码

然后再Article.vue文件调用函数：

<script setup>
//导入article.js文件
import { articleGetAllService , articleSearchService} from '@/api/article.js' //@ => src
import { ref } from 'vue';
//定义响应式数据 articleList
const articleList = ref([]);
//调用函数发送请求查询
articleList.value = articleGetAllService();
//定义响应式数据 searchConditions
const searchConditions = ref({
category: '',
state: ''
})
//调用函数发送请求搜索
const search = function(){
articleList.value = articleSearchService({...searchConditions.value});
}
</script>

复制代码

但是我们运行后会发现页面列表没有正常的渲染出来，是因为在article.js文件中的axios是异步哀求会等待服务器响应效果，需要耗费时间，这个时候我们不知道什么时候得到效果，所以需要同步等待服务器响应的效果并返回。
这个时候我们使用js提供的await，在axios前面加上await就会同步等待服务器响应这个效果，若服务器没有响应效果，则方法就不会竣事。
而await只能使用在异步函数内，所以需要再我们function前加上async，然后我们比及服务器响应的效果就需要return返回效果，所以我们在await前面加上return就可以获得实际返回效果。

export async function articleGetAllService(){
//发送请求获取所有文章数据
//需要同步等待服务器响应的结果并返回 async await
return await axios.get('http://localhost:8080/article/getAll')
.then(result=>{
//返回数据
return result.data;
}).catch((err)=>{
console.log(err);
});
}

复制代码

而我们加上async就会将articleGetAllService这个函数会变成异步函数，所以同样也会得不到响应的效果来通报给articleList，所以为相识决这个标题，我们就会同步获取articleGetAllService的返回效果，而await需要包装到一个异步函数内，所以我们可以界说一个异步方法来包装。

//调用函数发送请求查询
const getAllArticle = async function(){
//加上await将异步变成同步
articleList.value = await articleGetAllService();
}

复制代码

这个过程也就是不绝套娃，末了我们可以让使用的vue文件能够使用同步方法就行。而反复加上await与async是为了将方法变成同步方法。
自己的理解 => 当你加上await时是同步，但是团体方法必须加上async会变成异步，这个时候只要保证你想使用的步骤加上await变成同步方法即可。
（不明确没关系，背面会使用拦截器来避免套娃）
而我们只是封装了articleGetAllService，所以我们需要手动调用getAllArticle来执行。
下面请看完备代码：

<script setup>
//导入article.js文件
import { articleGetAllService , articleSearchService} from '@/api/article.js' //@ => src
import { ref } from 'vue';
//定义响应式数据 articleList
const articleList = ref([]);
//调用函数发送请求查询
const getAllArticle = async function(){
//加上await将异步变成同步
articleList.value = await articleGetAllService();
}
//手动调用getAllArticle方法
getAllArticle();
//定义响应式数据 searchConditions
const searchConditions = ref({
category: '',
state: ''
})
//调用函数发送请求搜索
const search = async function(){
articleList.value = await articleSearchService({...searchConditions.value});
}
</script>

复制代码

（5）axios.create({baseURL})的使用：

我们发现我们会不绝频繁的调用http://localhost:8080/地址头，倘若域名发生变化，我们改写起来会非常贫苦，这个时候我们举行如下利用：

界说一个baseURL
调用axios.create()方法

const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});

复制代码

使用这种格式，我们在使用的时候就会自动拼接。于是我们就可以这样写：

const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});instance.get('/article/search',{params: conditions}).then(result=>{ //返回数据 return result.data;}).catch((err)=>{ console.log(err);})

复制代码

三.axios的拦截器：

下面代码是基于官网拷贝下来的：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});

复制代码

我们在src/util/目录创建request.js文件：

//定制哀求的实例//导入axiosimport axios from 'axios';//界说变量baseURL记录公共前缀const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});//添加响应拦截器instance.interceptors.response.use( result=>{ return result.data; }, err=>{ alert('服务非常'); //将异步状态转换成失败状态，以便于走到catch来举行处置惩罚 return Promise.reject(err); })//暴露instance实例export default instance;

复制代码

之后我们就需要调整article.js代码：

//导入request.js文件
import request from '@/util/request.js'
export async function articleGetAllService(){
//发送请求获取所有文章数据
//需要同步等待服务器响应的结果并返回 async await
return await request.get('/article/getAll');
}
export async function articleSearchService(conditions){//传入conditions参数
return await request.get('/article/search',{params: conditions});
}

复制代码

因为拦截器自己是异步的，所以我们不需要再article.js文件中return后添加await，所以我们直接删除就可以了，因为拦截器会拦截哀求，返回数据的时候只需要在哪里渲染哪里同步一下数据就可以了。所以终极我们只需要在我们想要执行的方法加上await ，async就行了。
自己的理解 => 因为拦截器自己就是异步，也就是相当于我们末了再Article.vue文件中加入了同步，而过程中异步会因为末了的await终极变成同步等待效果。
下面请看完备代码：
request.js：（异步）

//定制哀求的实例//导入axiosimport axios from 'axios';//界说变量baseURL记录公共前缀const baseURL = 'http://localhost:8080';
const instance = axios.create({baseURL});//添加响应拦截器instance.interceptors.response.use( result=>{ return result.data; }, err=>{ alert('服务非常'); //将异步状态转换成失败状态，以便于走到catch来举行处置惩罚 return Promise.reject(err); })//暴露instance实例export default instance;

复制代码

article.js：

//导入request.js文件
import request from '@/util/request.js'
export function articleGetAllService(){
//发送请求获取所有文章数据
//需要同步等待服务器响应的结果并返回 async await
return request.get('/article/getAll');
}
export async function articleSearchService(conditions){//传入conditions参数
return request.get('/article/search',{params: conditions});
}

复制代码

Article.vue：

<script setup>
//导入article.js文件
import { articleGetAllService , articleSearchService} from '@/api/article.js' //@ => src
import { ref } from 'vue';
//定义响应式数据 articleList
const articleList = ref([]);
//调用函数发送请求查询
const getAllArticle = async function(){
//加上await将异步变成同步
articleList.value = await articleGetAllService();
}
//手动调用getAllArticle方法
getAllArticle();
//定义响应式数据 searchConditions
const searchConditions = ref({
category: '',
state: ''
})
//调用函数发送请求搜索
const search = async function(){
articleList.value = await articleSearchService({...searchConditions.value});
}
</script>

复制代码

终极只需要在Article.vue文件调用异步方法的时候加上await来变成同步方法即可。

好了，本日的分享就到这里了，感谢收看，如果以为对你有资助的话记得三连一下！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)