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

news2024/9/17 8:47:18

一.下载Vue3：

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

cnpm init vue@latest

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

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

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

  cd vue-project
  cnpm 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';
    //定义响应式数据 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/地址头，倘若域名发生变化，我们改写起来会非常麻烦，这个时候我们进行如下操作： 

  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 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：（异步）

//定制请求的实例
//导入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 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来变成同步方法即可。

 

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

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

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

相关文章

python做简单爬虫的一些常用组件

python做简单爬虫的一些常用组件

文章目录 前言requestjsonbs4 前言 最近一直在做零散的一次性的爬虫工作&#xff0c;基本都是用python开发的&#xff0c;整理一下python做小规模爬虫开发常用的一些工具类 request python最简单的发http请求的包&#xff0c;request.get和request.post就可以搞定绝大部分的…
阅读更多...
ECMA6Script学习笔记(五)

ECMA6Script学习笔记(五)

【摘要】 本文是对自己学习ES6的学习笔记回顾,后面是概要: 本文介绍了ES6中的对象创建和拷贝方法。对象创建方面&#xff0c;ES6通过class关键字支持了面向对象的语法糖&#xff0c;包括属性设置、getter和setter方法、构造器、静态方法以及私有属性的定义。同时&#xff0c;展…
阅读更多...
Linux系统root账号密码破解（重置）

Linux系统root账号密码破解（重置）

如果想不起root账号密码应该怎么做&#xff1f; 先关机再重新启动&#xff08;重启虚拟机&#xff09;做相关操作&#xff0c;开机时不能让服务器完全启动&#xff0c;需要把开机引导系统&#xff08;GRUB&#xff09;调出来 注&#xff1a;在实际生产环境中使用的Linux没有图…
阅读更多...
四，系统规划

四，系统规划

一&#xff0c;企业系统规划法BSP&#xff08;2009、2010、2018&#xff0c;步骤以及优缺点、用到的工具&#xff09; 企业系统规划法&#xff08;Business Systems Planning&#xff0c;BSP&#xff09;是IBM公司20世纪70年代提出的一种结构化的信息系统规划方法。该方法通过…
阅读更多...
Spring Cloud微服务项目公共类抽取

Spring Cloud微服务项目公共类抽取

在微服务架构中&#xff0c;代码的重用性和维护性是非常重要的。Spring Cloud 提供了丰富的工具和框架来帮助我们构建和管理微服务应用&#xff0c;但随着项目规模的扩大&#xff0c;我们会遇到大量的重复代码和相似的逻辑。在这种情况下&#xff0c;抽取公共类成为提高代码质量…
阅读更多...
回归测试：保障软件质量的利器

回归测试：保障软件质量的利器

目录 前言1. 回归测试的概念1.1 定义1.2 目标 2. 回归测试的主要作用2.1 确保系统稳定性2.2 提高软件质量2.3 节省维护成本 3. 回归测试在整个测试中的地位3.1 单元测试阶段3.2 集成测试阶段3.3 系统测试阶段3.4 验收测试阶段 4. 回归测试的主要工具4.1 Selenium4.2 JUnit4.3 J…
阅读更多...
《Redis设计与实现》读书笔记-数据结构（SDS）

《Redis设计与实现》读书笔记-数据结构（SDS）

目录 SDS定义 SDS结构 SDS与C字符串结构差异 SDS优点 SDS扩容策略 SDS惰性空间回收 SDS定义 SDS&#xff08;简单动态字符串&#xff09;&#xff0c;用于代替C语言自身的字符串&#xff08;字符容量与字符数组强相关&#xff09;。 SDS结构 sdshdr{int free //sds 中…
阅读更多...
预警系统最小例程构建

预警系统最小例程构建

预警系统最小例程构建 引言 为了更直观, 我们使用最小例程来实现这个预警流程, 环境温湿度读取,然后判断阈值, 超标则触发小灯警报。 最小例程工程备份链接: https://ww0.lanzoul.com/iz4wd261k21i 仿真文件工程备份链接: https://ww0.lanzoul.com/i8vTn261syyb 文章目录…
阅读更多...
Jeecgboot仪表盘设计器使用https时访问报错

Jeecgboot仪表盘设计器使用https时访问报错

问题 仪表盘设计器设计好后&#xff0c;Nginx配置域名发送https请求时&#xff0c;/drag/page/queryById、/drag/page/addVisitsNumber仍发送http请求。导致发送下面错误&#xff1a; 原因 仪表盘设计器里设计的页面是由后端生成返回给前端的&#xff0c;后端是根据后端服…
阅读更多...
docker安装elasticsearch（es）最新版本

docker安装elasticsearch（es）最新版本

docker安装elasticsearch&#xff08;es&#xff09; docker官网 https://hub.docker.com/ https://www.cnblogs.com/balloon72/p/13177872.html 1、拉取最新项目elasticsearch docker pull elasticsearch:8.14.3lscpu 查看架构 2、构建环境 mkdir -p /data/elasticsear…
阅读更多...
【TOOLS】Project 2 Maven Central

【TOOLS】Project 2 Maven Central

发布自己的项目到maven中央仓库 Maven Central Account 访问&#xff1a;https://central.sonatype.com/&#xff0c;点击右上角&#xff0c;根据提示注册账号 构建User token &#xff0c;用于访问中央仓库的API&#xff1a; 点击右上角&#xff0c;查看账户点击Generate Us…
阅读更多...
医院体检信息管理系统，C#体检系统源码，健康体检系统PEIS

医院体检信息管理系统，C#体检系统源码，健康体检系统PEIS

体检服务全流程 检前 检前注意事项提醒-体检预约-套餐选择-体检签到-费用缴纳 检中 科室队列提醒-增项检中支付 检后 报告查询-体检百科-报告解读-问卷调查 体检管理系统模块介绍 一、登记管理模块 登记体检者基本信息&#xff0c;包括唯一的体检编号&#xff0c;姓名、…
阅读更多...
Windows 10+Visual Studio2019 Opencv-C++安装配置

Windows 10+Visual Studio2019 Opencv-C++安装配置

前往官网下载需要的版本Releases - OpenCVhttps://opencv.org/releases/ 1.下载并解压OpenCV 我选择4.6.0&#xff0c;点击windows版本&#xff0c;进行下载 2.配置项目属性 打开你的Visual Studio 2019项目 -> 右击项目名&#xff0c;选择“属性” 注&#xff1a;整个配…
阅读更多...
【C语言】指针基础知识理解【续】

【C语言】指针基础知识理解【续】

1. ⼆级指针 指针变量也是变量&#xff0c;是变量就有地址&#xff0c;那指针变量的地址存放在哪⾥&#xff1f;这就是 ⼆级指针 。 1.1 引入二级指针 由于一级指针已经很熟悉&#xff0c;这里就不再赘述&#xff0c;这里我们重点探讨二级指针 下面先简单使用一个二级指针看…
阅读更多...
机器学习之——支持向量机（SVM）技术详解

机器学习之——支持向量机（SVM）技术详解

机器学习之——支持向量机&#xff08;SVM&#xff09;技术详解 1. 支持向量机的基本原理1.1 超平面1.1.1 定义与作用1.1.2 高维空间中的超平面 1.2 间隔最大化1.2.1 间隔的定义1.2.2 最大化间隔的原则 1.3 支持向量1.3.1 支持向量的定义1.3.2 支持向量的作用 2. SVM的数学基础…
阅读更多...
Vue3 加载条（LoadingBar）

Vue3 加载条（LoadingBar）

效果如下图&#xff1a;在线预览 APIs LoadingBar 参数说明类型默认值必传containerClass加载条容器的类名stringundefinedfalsecontainerStyle加载条容器的样式CSSProperties{}falseloadingBarSize加载条大小&#xff0c;单位 pxnumber2falsecolorLoading加载中颜色string‘…
阅读更多...
快速识别音频文件转成文字

快速识别音频文件转成文字

一、SenseVoice概述 阿里云通义千问开源了两款语音基座模型 SenseVoice&#xff08;用于语音识别&#xff09;和 CosyVoice&#xff08;用于语音生成&#xff09;。 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测&#xff0c;有以下特点&#xff1a; 多语言…
阅读更多...
4000元投影仪性价比之王：爱普生TW5750极米RS10还是当贝X5S？

4000元投影仪性价比之王：爱普生TW5750极米RS10还是当贝X5S？

买投影很多人会倾向于买大品牌或者是销量最好的那几款&#xff0c;首先是大品牌售后更有保障&#xff0c;口碑和销量也间接证明了这款投影是否值得买。这几年国内投影市场中爱普生、极米、当贝这三家投影品牌无论是在产品、口碑、售后服务等方面都是最好的&#xff0c;被用户们…
阅读更多...
深入理解 Go 数组、切片、字符串

深入理解 Go 数组、切片、字符串

打个广告&#xff1a;欢迎关注我的微信公众号&#xff0c;在这里您将获取更全面、更新颖的文章&#xff01; 原文链接&#xff1a;深入理解 Go 数组、切片、字符串 欢迎点赞关注 前言 为什么在一篇文章里同时介绍数组、切片、字符串&#xff0c;了解这三个数据类型底层数据结构…
阅读更多...
【人工智能专栏】Beam Search 束搜索

【人工智能专栏】Beam Search 束搜索

Beam Search 束搜索 这里是一个 beam_size=2 的Beam Search示意图，每个节点都会扩展5个下级节点，在 Beam Search 每次都会从所有扩展节点里面挑选出2个累计启发值最大的节点，直到达到结束标准。 理念 Beam Search 是对 Greedy Search（贪心搜索）的一个改进算法，能够扩展…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023