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来变成同步方法即可。

 

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/3281594.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

华为仓颉语言测试申请

华为仓颉语言测试申请

1. 申请网址 HarmonyOS NEXT仓颉语言开发者预览版 Beta招募- 华为开发者联盟 点击立即报名登录华为账号 勾选选项 , 点击同意 按要求填写信息即可 2. 申请通过后官方会通过邮件的方式发送相关下载途径 , 根据文档进行下载即可 package Cangmain(): Int64 {println("你…
阅读更多...
AI技术修复奥运珍贵历史影像，《永不失色的她》再现百年奥运女性光彩

AI技术修复奥运珍贵历史影像，《永不失色的她》再现百年奥运女性光彩

Greatness of HER &#xff01; AI致敬 , 了不起的「她」。 7月25日&#xff0c;在国际奥委会和各方力量的支持下&#xff0c;阿里云以AI技术修复奥运珍贵历史影像&#xff0c;让百年奥运女性的伟大光彩被看见&#xff0c;并在巴黎推出《永不失色的她》全球首映礼。 国际奥委会…
阅读更多...
Graph Contrastive Learning via Interventional View Generation

Graph Contrastive Learning via Interventional View Generation

发表于:WWW24 推荐指数: #paper/⭐⭐ 框架与动机: 整体框架 动机: 如上四个: b.HLCL 生成随机增强视图,并分别用高通过滤器和低通过滤器过滤 c.生成同配异配视图,都用低通过滤器 d.生成同配视图异配视图,同配视图用低通过滤器,异配视图用高通过滤器 通过图d,我们可以得出:d&g…
阅读更多...
基于Material studio拉伸-断裂过程的Perl脚本

基于Material studio拉伸-断裂过程的Perl脚本

在材料科学的研究中&#xff0c;拉伸-断裂过程一直是科学家们探索的焦点。这一过程涉及复杂的力学行为和材料内部微观结构的变化&#xff0c;对于理解材料的性能至关重要。然而&#xff0c;传统的实验方法不仅耗时耗力&#xff0c;而且难以捕捉到微观尺度上的所有细节。 为了满…
阅读更多...
网站如何实现HTTPS访问

网站如何实现HTTPS访问

要实现网站通过HTTPS协议访问&#xff0c;主要依赖于为网站部署SSL/TLS证书。 SSL&#xff08;Secure Sockets Layer&#xff09;是用于在互联网上加密数据传输的安全协议。部署了SSL证书之后&#xff0c;网站就可以通过HTTPS&#xff08;超文本传输安全协议&#xff09;来提供…
阅读更多...
C# Unity 面向对象补全计划 之 初识继承方法与多态

C# Unity 面向对象补全计划 之 初识继承方法与多态

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列旨在通过补全学习之后&#xff0c;给出任意类图都能实现并做到逻辑上严丝合缝 1.继承方法 C# & Unity 面向对象补全计划 之 继承&#xff08;字段与属性&…
阅读更多...
Java真人版猫爪老鼠活动报名平台系统

Java真人版猫爪老鼠活动报名平台系统

&#x1f43e;“真人版猫爪老鼠活动报名平台系统”——趣味追逐&#xff0c;等你来战&#xff01;&#x1f42d; &#x1f431;【萌宠变主角&#xff0c;现实版趣味游戏】 厌倦了电子屏幕的虚拟游戏&#xff1f;来试试“真人版猫爪老鼠活动”吧&#xff01;在这个平台上&…
阅读更多...
PHP进阶-CentOS7部署LNMP服务架构的项目

PHP进阶-CentOS7部署LNMP服务架构的项目

在开发和部署Web应用时&#xff0c;LNMP&#xff08;Linux、Nginx、MySQL、PHP&#xff09;的组合是非常常见的。这篇博客将介绍如何通过一个简单的脚本&#xff0c;在CentOS 7上部署LNMP&#xff0c;并将PHP项目自动部署到服务器上。这不仅可以节省大量的时间&#xff0c;还能…
阅读更多...
一个接口未做超时处理，引发数据库hang了

一个接口未做超时处理，引发数据库hang了

前言 在代码开发过程中&#xff0c;你是否会经常遇到以下问题&#xff1f; 数据库连接被瞬间占用&#xff0c;出现性能瓶颈 系统资源被大量占用&#xff0c;出现锁等待或性能下降 事务日志大量增长 上述这些状况的出现可能是未提交事务引发的。该类事务开启后&#xff0c;…
阅读更多...
什么是五力分析？5分钟带你了解它在企业财务经营中的应用与价值！

什么是五力分析？5分钟带你了解它在企业财务经营中的应用与价值！

如今&#xff0c;随着全球化进程的不断加速&#xff0c;市场环境复杂多变&#xff0c;市场竞争日益激烈&#xff0c;财务经营已经成为了企业应对复杂市场环境、保持自身竞争力的关键。体系化的五力分析平台能够为企业提供一套全面的解决方案&#xff0c;帮助企业在盈利能力、偿…
阅读更多...
【随机链表的复制】python刷题记录

【随机链表的复制】python刷题记录

R3-哈希表 参考k神题解 哈希表法&#xff1a; """ # Definition for a Node. class Node:def __init__(self, x: int, next: Node None, random: Node None):self.val int(x)self.next nextself.random random """class Solution:def copy…
阅读更多...
Java红娘相亲交友平台系统源码小程序

Java红娘相亲交友平台系统源码小程序

&#x1f495;遇见真爱&#xff0c;从“红娘相亲交友平台系统”开始&#xff01;&#x1f46b; &#x1f339;【精准匹配&#xff0c;缘分不再擦肩而过】 还在为茫茫人海中找不到那个TA而烦恼吗&#xff1f;“红娘相亲交友平台系统”利用先进的大数据分析技术&#xff0c;根据…
阅读更多...
电脑怎么压缩图片？6个简单实用的压缩方法分享（无损压缩）

电脑怎么压缩图片？6个简单实用的压缩方法分享（无损压缩）

电脑怎么压缩图片&#xff1f;面对电脑较大的图片&#xff0c;小编是建议大家进行压缩的。文件过大容易影响电脑存储空间&#xff0c;而且还不容易上传和传输。图片压缩有很多方法可以有效解决&#xff0c;简单几步就能将图片压缩变小&#xff0c;下面是相关的介绍&#xff0c;…
阅读更多...
web期末大作业家乡-浙江

web期末大作业家乡-浙江

代码下载: https://pan.quark.cn/s/2e157769c4ad
阅读更多...
android动态权限申请并告知权限申请的使用目的

android动态权限申请并告知权限申请的使用目的

随着工信部对APP的一系列整治&#xff0c;现在要求APP在申请相机、位置等敏感权限时需要向用户同步告知权限申请的使用目的。个大应用市场在APP上线审核中也会重点检查这项要求。 从Android 6.0开始&#xff0c;对于敏感权限的获取&#xff0c;APP需要调用系统提供的动态申请权…
阅读更多...
借银行的贷款去还网贷，可以吗？

借银行的贷款去还网贷，可以吗？

近日&#xff0c;有很多网友问我&#xff0c;他们申请的公积金贷款&#xff0c;能不能用这笔钱来还清信用卡和网贷&#xff0c;但又怕这么做会违法&#xff0c;或者银行会突然要求他提前还贷。 首先&#xff0c;放心&#xff0c;这么做不违法。但银行确实不太鼓励这么用贷款&am…
阅读更多...
【扒模块】DFF

【扒模块】DFF

图 医学图像分割任务 代码 import torch import torch.nn as nnfrom timm.models.layers import DropPath # 论文&#xff1a;D-Net&#xff1a;具有动态特征融合的动态大核&#xff0c;用于体积医学图像分割&#xff08;3D图像任务&#xff09; # https://arxiv.org/abs/2403…
阅读更多...
嵌入式开发问题总汇

嵌入式开发问题总汇

1. 事情经过&#xff1a;有天快下班的时候&#xff0c;我们采购经理找到我&#xff0c;说&#xff0c;生成的bin文件通过软件上传烧录时&#xff0c;烧录就会重启&#xff0c;但是其他的板子就不会。最后他换了一个A厂家的flash芯片&#xff0c;就可以了。但是&#xff0c;B厂…
阅读更多...
整箱排柜不返工？用易境通散拼系统就OK

整箱排柜不返工？用易境通散拼系统就OK

想必困扰散货拼柜小伙伴们一大难题就是&#xff0c;怎么把错乱纷繁的货物有序地整箱排柜&#xff0c;并且要保证集装箱高效利用&#xff0c;运输成本尽量降低。这不仅要求操作者具备卓越的统筹规划能力&#xff0c;更需长期积累的实践经验和敏锐的应变能力。易境通散拼系统可以…
阅读更多...
SSM城市垃圾分类管理系统-计算机毕业设计源码44582

SSM城市垃圾分类管理系统-计算机毕业设计源码44582

摘 要 在当前全球环境问题日益突出的背景下&#xff0c;城市垃圾分类成为推动可持续发展和环境保护的重要举措之一。然而&#xff0c;传统的垃圾处理方式存在效率低下、资源浪费和环境污染等问题。因此&#xff0c;开发一个基于Java编程语言、MySQL数据库和HTML前端技术的高效…
阅读更多...
最新文章

Copyright @ 2022~2023