vue学习笔记(十一)——开发心得(axios的封装、promise细节、vue-router开发中的使用)

1. axios的网络请求的封装

1.1 为什么要封装api?

        代码分层,便于以后的修改,无需触碰逻辑页面
目标:
        网络请求,不散落在各个逻辑页面里,封装起来方便以后修改

1.2 封装api步骤

① 在项目 src 下新建目录 utlis ,此目录一般用于管理项目下所使用到的工具,如 axios。

② 在 utils 目录下新建 request.js 文件,对axios进行二次封装,并且制定项目的根地址并使用默认导出将 axios 导出。(每个模块中,只允许使用唯一的一次 export default,否则会报错!

③ 在 src 下新建目录 api ,用于统一管理所有需要的 url地址,封装网络请求方法导出。

如在 api 目录下新建 home.js 用于统一管理首页 Home 组件中的所有网络请求

④ 在 api 目录下新建 index.js,将 api 文件夹下各个请求模块的 js 都统一导入到 index.js 中,再统一向外导出接口,导出的方法统一加一个 API 后缀,开发时使用时就知道这是接口函数了。

⑤ 在某个组件中使用的时候,直接导入使用该方法。

2. promise 的使用细节

2.1 async修饰的函数 -> 默认返回一个全新Promise对象

        如在 methods 方法中使用的 getSongList 方法,由于 searchResultAPI 是使用 axios 封装的一个接口函数,所以该接口函数返回的是一个 promise 对象,可以通过使用 await 修饰直接拿到返回的结果。如果某个方法内部使用了 await 修饰,那么这个方法需要使用 async 来修饰该方法。

        在 hotsFun 函数中调用 getSongList 方法时,getSongList方法返回值的是一个 promise 对象。因为 getSongList 用了 async 方法修饰,所以返回了一个新的 promise 对象。因此可以使用 await 来修饰,直接拿到返回的结果。某个函数内部用了 await 修饰后,需要加 async 修饰。

3. vue-router 开发中的使用细节

3.1 vue-router 开发中的统一管理

① router/index.js – 配置路由规则和对应路由页面        

        在 src 下新建目录 router,再新建文件 index.js,在 index.js 中配置路由规则和对应路由页面,之后使用默认导出。

② main.js – 引入路由对象注入到vue中

③ App.vue – 留好router-view显示路由页面(挂载)

3.2 路由元信息-meta

① meta是什么?

        是用来存储路由相关的一些额外信息。可以把它理解为附加在路由上的标签或属性,这些标签或属性对应的信息可以在路由守卫、组件等地方被访问和利用。

② meta 的使用

        直接写在路由规则的配置里

        

        在组件里可以通过 this.$route.meta.属性名 的方式拿到具体的值。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++——初识模板

前言 模板是C中的重大板块,是使C真正超越C语言的工具,在C模板没有设计出来之前其实C是没有那么被行业和社会所认可的,本节我们将初步了解C中的模板(仅作大致讲解,具体的细枝末节将会再过几节讲解)&#xf…

Qt多语言功能实现

本文介绍Qt多语言功能实现。 应用程序多语言支持是常用功能,比如产品需要出口到不同语种的国家。采用Qt的多语言支持工具可以方便实现应用程序的多语言功能。本文以中英文语言切换为例,简要介绍Qt的多语言功能实现。 1.界面设计 界面设计需要考虑使用…

【数据分享】2013-2022年我国省市县三级的逐日SO2数据(excel\shp格式\免费获取)

空气质量数据是在我们日常研究中经常使用的数据!之前我们给大家分享了2000——2022年的省市县三级的逐日PM2.5数据和2013-2022年的省市县三级的逐日CO数据(均可查看之前的文章获悉详情)! 本次我们分享的是我国2013——2022年的省…

数据隐私保护与区块链技术的结合:新兴趋势分析

在当今数字化时代,数据隐私保护成为了一个备受关注的重要话题。随着个人数据的不断生成和流通,如何有效保护用户的隐私成为了技术创新的一个重要方向。区块链技术作为一种去中心化、安全性高且可追溯的技术手段,正在逐渐成为解决数据隐私保护…

golang 基础 泛型编程

(一) 示例1 package _caseimport "fmt"// 定义用户类型的结构体 type user struct {ID int64Name stringAge uint8 }// 定义地址类型的结构体 type address struct {ID intProvince stringCity string }// 集合转列表函数&#…

杰发科技Bootloader(2)—— 基于7840的Keil配置地址

序 在7840的sample代码里面有一个简单的Boot跳转APP的示例 PFlash地址从0开始 DFlash的地址从1000000开始 Boot解析 他的boot地址配置为0 Boot的代码主要是这几行,主要作用就是Flash的跳转 int main(void) {SystemClock_Config();InitDebug();printf("demo…

Leetcode 721.账户合并(hash+dfs)☆

思路: 最核心的地方在于如何合并?这里是通过具有相同的email进行账户的合并,这个相同的email类似于图中的共同节点将两个账户连接起来,所以将原来 账户名 -> 邮件1 邮件2.。。变成hash 邮件1 ->账户id1,账户id2…

ModelArts中sinh算子的开发

一、环境配置 1、创建notebook并连接 使用ModelArts新建一个notebook,我这里镜像选择第一个,里面含有cann和Ascend910处理器,我这里环境只能使用ssh连接,创建一个密钥对,保存到C盘中的user/Administrator/目录下。 在网页中选择使用vscode接入,等待vscode打开后,选择密…

【数据结构初阶】一篇文章带你超深度理解【单链表】

hi ! 目录 前言: 1、链表的概念和结构 2、单链表(Single List,简写SList)的实现 2.1 定义链表(结点)的结构 2.2 创建一个链表 2.3 打印链表 2.4 尾插 2.5 头插 2.6 尾删 2.7 头…

PT2262-IR

PT2262是一款很古老的编码芯片,其兼容型号有:SC2262,AD2262,SC2260(需改变匹配电阻)等。 依据其datasheet,PT2262射频模式工作原理: CODE BITS A Code Bit is the basic component of the encoded waveform, and ca…

Docker核心技术:Docker原理之Cgroups

云原生学习路线导航页(持续更新中) 本文是 Docker核心技术 系列文章:Docker原理之Cgroups,其他文章快捷链接如下: 应用架构演进容器技术要解决哪些问题Docker的基本使用Docker是如何实现的 Docker核心技术:…

Maven学习——Maven的下载、安装与配置(详细攻略!)

目录 前言 1.下载与安装 2.配置Maven的环境变量 3.配置Maven的本地仓库 4. 配置Maven的镜像远程仓库 前言 我在之前写了一篇博客,是介绍Maven的基本概念和下载安装,但是由于篇幅过长,Maven的下载与安装写的并不详细🐶&#x…

Windows系统设置暂停更新,暂停时间可达3000天,“永久”暂停更新,亲测有效

好多小伙伴被Windows系统的更新搞得很烦,经常在使用中自己下载更新包,占用网路资源,过段时间就要更新,特别讨厌 今天教你一招,可以暂停更新长达3000天,亲测有效 1、打开系统CMD命令执行窗口,输…

Ideal窗口中左右侧栏消失了

不知道大家在工作过程中有没有遇到过此类问题,不论是Maven项目还是Gradle项目,突然发现Ideal窗口右侧图标丢失了,同事今天突然说大象图标不见了,不知道怎样刷新gradle。 不要慌张,下面提供一些解决思路: 1…

超声波俱乐部:AI应用大爆发前夜,场景、闭环与LLM进化

7月13日,第十九期超声波俱乐部内部分享会在北京望京举行,本期的主题是:AI应用大爆发前夜,场景、闭环与LLM进化。 到场的嘉宾有:超声波创始人杨子超,超声波联合创始人、和牛商业创始人刘思雨,豆…

硅纪元视角 | 语音克隆突破:微软VALL-E 2,Deepfake新纪元!

在数字化浪潮的推动下,人工智能(AI)正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展,捕捉行业动态;提供深入的新闻解读,助您洞悉技术背后的逻辑;汇聚行业专家的见解,…

IP协议和路由转发

文章目录 IP协议IP报头网段划分特殊的IP私有IP和公有IP IP分片 路由 IP协议 IP协议提供了一种能力,将数据报从A主机送到B主机,TCP可以保证可靠性,所以TCP/IP协议可以将数据可靠的从A主机送到B主机。 IP报头 4位版本号(version): 指定IP协议…

Java 面试 | Redis

目录 1. 在项目中缓存是如何使用的?2. 为啥在项目中要用缓存?3. 缓存如果使用不当会造成什么后果?4. redis 和 memcached 有什么区别?5. redis 的线程模型是什么?6. 为什么单线程的 redis 比多线程的 memcached 效率要…

android13禁用某个usb设备

总纲 android13 rom 开发总纲说明 目录 1.前言 2.触摸设备查看 3.功能修改 3.1 禁用usb触摸 3.2 禁用usb键盘 3.3 禁用usb遥感 4.查看生效与否 5.彩蛋 1.前言 用户想要禁止使用某些usb设备,需要系统不能使用相关的usb设备,例如usb触摸屏,usb键盘,usb遥感等等usb…

Unity:PC包直接查看Log日志

PC端会输出Log日志,位置在: C:\Users\用户名\AppData\LocalLow\公司名\项目名 在这里可以找到类似的文件: 打开便可以看到打印。