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回车打开命令栏，执行 ：

1. cnpm init vue@latest

复制代码

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

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

复制代码

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

1.   cd vue-project
2.   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哀求的两种根本格式： 

1. //使用之前需要导入axios
2. import axios from 'axios';
3. // 向给定ID的用户发起请求
4. axios.get('/user?ID=12345')
5.   .then(function (response) {
6.     // 处理成功情况
7.     console.log(response);
8.   })
9.   .catch(function (error) {
10.     // 处理错误情况
11.     console.log(error);
12.   })
13.   .finally(function () {
14.     // 总是会执行
15.   });
17. // 上述请求也可以按以下方式完成（可选）
18. axios.get('/user', {
19.     params: {
20.       ID: 12345
21.     }
22.   })
23.   .then(function (response) {
24.     console.log(response);
25.   })
26.   .catch(function (error) {
27.     console.log(error);
28.   })
29.   .finally(function () {
30.     // 总是会执行
31.   });

复制代码

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

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

1. <script setup>
2. import ArticalVue from './components/Artical.vue'
3. </script>
5. <template>
6. <ArticalVue/>
7. </template>

复制代码

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

1. <template>
2.     <div>
3.         文章分类: <input type="text" v-model="searchConditions.category">
4.         发布状态: <input type="text" v-model="searchConditions.state">
5.         <button  @click="search">搜索</button><br /> <br />
6.         <table border="1 solid" colspa="0" cellspacing="0">
7.             <tr>
8.                 <th>文章标题</th>
9.                 <th>分类</th>
10.                 <th>发表时间</th>
11.                 <th>状态</th>
12.                 <th>操作</th>
13.             </tr>
14.             <tr v-for="(article,index) in articleList">
15.                 <td>{{article.title}}</td>
16.                 <td>{{article.category}}</td>
17.                 <td>{{article.time}}</td>
18.                 <td>{{article.state}}</td>
19.                 <td>
20.                     <button>编辑</button>
21.                     <button>删除</button>
22.                 </td>
23.             </tr>
24.         </table>
25.     </div>   
26. </template>
28. <script setup>
29.     import axios from 'axios';
30.     import { ref } from 'vue';
31.     //定义响应式数据 articleList
32.     const articleList = ref([]);
33.     //发送请求获取所有文章数据
34.     axios.get('http://localhost:8080/article/getAll')
35.     .then(result=>{
36.         //保存数据
37.         articleList.value = result.data;
38.     }).catch((err)=>{
39.         console.log(err);
40.     });
41.     //定义响应式数据 searchConditions
42.     const searchConditions = ref({
43.         category: '',
44.         state: ''
45.     })
46.     //声明search函数
47.     const search = function(){
48.         //发送请求完成搜索
49.         axios.get('http://localhost:8080/article/search',{params:{...searchConditions.value}})
50.         .then(result=>{
51.             articleList.value = result.data;
52.         })
53.         .catch((err)=>{
54.             console.log(err);
55.         })
56.     }
57. </script>

复制代码

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

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

复制代码

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

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

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

1. //导入axios
2. import axios from 'axios';
3. //暴露函数：在function前加上export
4. export function articleGetAllService(){
5.     //发送请求获取所有文章数据
6.     axios.get('http://localhost:8080/article/getAll')
7.     .then(result=>{
8.         //返回数据
9.         return result.data;
10.     }).catch((err)=>{
11.         console.log(err);
12.     });
13. }
14. export function articleSearchService(conditions){//传入conditions参数
15.     axios.get('http://localhost:8080/article/search',{params: conditions})
16.         .then(result=>{
17.             //返回数据
18.             return result.data;
19.         })
20.         .catch((err)=>{
21.             console.log(err);
22.         })
23. }

复制代码

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

1. <script setup>
2.     //导入article.js文件
3.     import { articleGetAllService , articleSearchService} from  '@/api/article.js' //@ => src
4.     import { ref } from 'vue';
5.     //定义响应式数据 articleList
6.     const articleList = ref([]);
7.     //调用函数发送请求查询
8.     articleList.value = articleGetAllService();
9.     //定义响应式数据 searchConditions
10.     const searchConditions = ref({
11.         category: '',
12.         state: ''
13.     })
14.     //调用函数发送请求搜索
15.     const search = function(){
16.         articleList.value = articleSearchService({...searchConditions.value});
17.     }
18. </script>

复制代码

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

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

复制代码

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

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

复制代码

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

1. <script setup>
2.     //导入article.js文件
3.     import { articleGetAllService , articleSearchService} from  '@/api/article.js' //@ => src
4.     import { ref } from 'vue';
5.     //定义响应式数据 articleList
6.     const articleList = ref([]);
7.     //调用函数发送请求查询
8.     const getAllArticle = async function(){
9.         //加上await将异步变成同步
10.         articleList.value = await articleGetAllService();
11.     }
12.     //手动调用getAllArticle方法
13.     getAllArticle();
14.     //定义响应式数据 searchConditions
15.     const searchConditions = ref({
16.         category: '',
17.         state: ''
18.     })
19.     //调用函数发送请求搜索
20.     const search = async function(){
21.         articleList.value = await articleSearchService({...searchConditions.value});
22.     }
23. </script>

复制代码

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

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

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

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

复制代码

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

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

复制代码

三.axios的拦截器：

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

1. // 添加请求拦截器
2. axios.interceptors.request.use(function (config) {
3.     // 在发送请求之前做些什么
4.     return config;
5.   }, function (error) {
6.     // 对请求错误做些什么
7.     return Promise.reject(error);
8.   });
10. // 添加响应拦截器
11. axios.interceptors.response.use(function (response) {
12.     // 2xx 范围内的状态码都会触发该函数。
13.     // 对响应数据做点什么
14.     return response;
15.   }, function (error) {
16.     // 超出 2xx 范围的状态码都会触发该函数。
17.     // 对响应错误做点什么
18.     return Promise.reject(error);
19.   });

复制代码

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

1. //定制哀求的实例//导入axiosimport axios from 'axios';//界说变量baseURL记录公共前缀const baseURL = 'http://localhost:8080';
2. 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代码：

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

复制代码

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

1. //定制哀求的实例//导入axiosimport axios from 'axios';//界说变量baseURL记录公共前缀const baseURL = 'http://localhost:8080';
2. 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：

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

复制代码

Article.vue：

1. <script setup>
2.     //导入article.js文件
3.     import { articleGetAllService , articleSearchService} from  '@/api/article.js' //@ => src
4.     import { ref } from 'vue';
5.     //定义响应式数据 articleList
6.     const articleList = ref([]);
7.     //调用函数发送请求查询
8.     const getAllArticle = async function(){
9.         //加上await将异步变成同步
10.         articleList.value = await articleGetAllService();
11.     }
12.     //手动调用getAllArticle方法
13.     getAllArticle();
14.     //定义响应式数据 searchConditions
15.     const searchConditions = ref({
16.         category: '',
17.         state: ''
18.     })
19.     //调用函数发送请求搜索
20.     const search = async function(){
21.         articleList.value = await articleSearchService({...searchConditions.value});
22.     }
23. </script>

复制代码

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

---

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

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