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的项目了。
https://i-blog.csdnimg.cn/direct/9badf68595034820bade8bd2aa748978.png
下面是vite设置官网地址：设置 Vite {#configuring-vite} | Vite中文网 (vitejs.cn)
二.Vue3使用axios举行前后端毗连：
1.起首安装axios：
输入cnpm install axios来下载axios依赖：
https://i-blog.csdnimg.cn/direct/2a393bede004449d9e0242b06de6a42a.png
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());
}
} 之后我们运行效果就是下面的图片：
https://i-blog.csdnimg.cn/direct/1ce0ef27ae8240518d8c9419b8928239.png
但是这里有个标题，如果我们要是在别的.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的拦截器：
https://i-blog.csdnimg.cn/direct/b54986ff820f4f389e911cbc6526eac4.png
下面代码是基于官网拷贝下来的：
// 添加请求拦截器
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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]