vue基础知识总结（2）--- axios的使用

一.下载Vue3：

选择自己想要下载的项目文件夹，cmd回车打开命令栏，执行 ：

cnpm init vue@latest

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

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

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

  cd vue-projectcnpm install

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

 二.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';//定义响应式数据 articleListconst articleList = ref([]);//发送请求获取所有文章数据axios.get('http://localhost:8080/article/getAll').then(result=>{//保存数据articleList.value = result.data;}).catch((err)=>{console.log(err);});//定义响应式数据 searchConditionsconst 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' //@ => srcimport { ref } from 'vue';//定义响应式数据 articleListconst articleList = ref([]);//调用函数发送请求查询articleList.value = articleGetAllService();//定义响应式数据 searchConditionsconst 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 awaitreturn 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' //@ => srcimport { ref } from 'vue';//定义响应式数据 articleListconst articleList = ref([]);//调用函数发送请求查询const getAllArticle = async function(){//加上await将异步变成同步articleList.value = await articleGetAllService();}//手动调用getAllArticle方法getAllArticle();//定义响应式数据 searchConditionsconst searchConditions = ref({category: '',state: ''})//调用函数发送请求搜索const search = async function(){articleList.value = await articleSearchService({...searchConditions.value});}
</script>

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

我们发现我们会不断频繁的调用http://localhost:8080/地址头，倘若域名发生变化，我们改写起来会非常麻烦，这个时候我们进行如下操作： 

1. 定义一个baseURL
2. 调用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文件：

//定制请求的实例
//导入axios
import 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 awaitreturn 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：（异步）

//定制请求的实例
//导入axios
import 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 awaitreturn 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' //@ => srcimport { ref } from 'vue';//定义响应式数据 articleListconst articleList = ref([]);//调用函数发送请求查询const getAllArticle = async function(){//加上await将异步变成同步articleList.value = await articleGetAllService();}//手动调用getAllArticle方法getAllArticle();//定义响应式数据 searchConditionsconst searchConditions = ref({category: '',state: ''})//调用函数发送请求搜索const search = async function(){articleList.value = await articleSearchService({...searchConditions.value});}
</script>

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

 

---

好了，今天的分享就到这里了，感谢收看，如果觉得对你有帮助的话记得三连一下！！！