关键词:
使用请求Hooks完善业务
在前端开发过程中,对于Api接口通常会进行封装,这里vue3中因为添加了typescript,所以也再来写写。
本次接口使用的是网上找的公开api:https://tenapi.cn/zhihuresou/,请求出来的数据是知乎热搜榜
返回数据格式:
"data": 200,
"list": [
"name": "lpl",
"query": "FPX 不敌 iG 遭淘汰",
"url": "https://www.zhihu.com/search?q=lpl&utm_content=search_hot&type=content"
]
fetch请求封装
- 在项目src文件夹下创建一个
hooks
文件夹,然后创建一个index.ts
文件和useApi.ts
文件。在useApi.ts
文件中主要编写api访问方法
- 在
useApi.ts
文件,创建一个useApi
方法,此方法的输出结果受泛型控制,并且传入两个参数,url和options。
该方法内部的url请求是使用了fetch
请求, RequestInfo
和RequestInit
类型不需要额外定义,这是ts里本身就有的
对于抛出方式,可以选择两种都写,这样外部使用时可选性会广一些。
方法中用了泛型,<T>
可以帮助捕获用户传入的类型,T可以赋值给之后传入参数value和返回值,来作为它们的类型。
function useApi<T>(url: RequestInfo, options?: RequestInit)
const response:Ref<undefined | T> = ref();
const request = async () =>
const res = await fetch(url, options);
const data = await res.json();
response.value = data;
return
response,
request
// 两种抛出方式
export default useApi;
export
useApi
- 这里可以设置一个接口,作为
useApi
方法返回的类型接口
export type ApiRequest = ()=>Promise<void>;
export interface UsableAPI<T>
response:Ref<undefined | T>,
request: ApiRequest
- 在切换到hooks目录下的index.ts,这是此文件夹的入口文件,外部要调用hooks内部的所有方法,都需要通过index.ts获取
在index.ts中添加 export useApi from './useApi';
quicktype
从接口获取到数据,在ts往往也需要将其转换为类型模型,这样之前的泛型中才能使用
可以自己依旧数据来写,也可以使用quicktype
快速生成
quicktype从JSON、JSON模式、TypeScript和GraphQL查询生成强类型模型和序列化程序,使在许多编程语言中安全地使用JSON类型变得轻而易举。 仓库:https://github.com/quicktype/quicktype
我选择了全局安装: npm install -g quicktype
, 如果图方便,可以直接使用网页https://app.quicktype.io/来进行生成
全局安装完成后,在vs code终端中打开要生成ts接口类型文件的对应models文件夹,然后输入命令:quicktype 接口地址 -o 文件名称.ts
在刚刚创建的models文件zhihu.ts中,可以编写一个模型方法,用于调用数据。此方法中通过引用之前写好的useApi方法获取接口数据
import useApi from '@/hooks'
import Ref, ref from 'vue';
export default async function useZhihu():Promise<Ref<Zhihu>>
const response: result, request = await useApi<Zhihu>('https://tenapi.cn/zhihuresou/');
// 发起一次请求
const loaded = ref(false)
if (loaded.value === false)
await request();
loaded.value = true;
return result;
vue组件中调用
在子组件中调用起来比较简单,直接引入使用即可,并且可以直接await
调用方法。在上面template
中渲染时,也和vue2的用法相同。
<template>
<ul class="zhihu">
<li v-for="(item) in res.list"> item.name </li>
</ul>
</template>
<script setup lang="ts">
import useZhihu from '@/models/zhihu'
const res = await useZhihu();
</script>
不过,当运行程序后,会发现界面并不显示,这是因为异步组件,界面需要使用Suspense
包裹,这是vue3新出的特性
<Suspense>
<template #default>
<apihookTest></apihookTest>
</template>
<template #fallback>
loading...
</template>
</Suspense>
效果:
至此,基于vue3 + typescript的简单apihooks封装就已经结束了
不习惯的vue3起步五のapihooks封装(代码片段)
使用请求Hooks完善业务在前端开发过程中,对于Api接口通常会进行封装,这里vue3中因为添加了typescript,所以也再来写写。本次接口使用的是网上找的公开api:https://tenapi.cn/zhihuresou/,请求出来的数据是知乎热... 查看详情
不习惯的vue3起步四の生命周期&provide/inject(代码片段)
...以用哪个,使用时需要用import从Vue中进行导入。选项APIHook(setup)作用beforeCreate不需要在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步 查看详情
不习惯的vue3起步の一:<scriptsetup>(代码片段)
序Vue3虽然说是Vue2的升级版,但里面不一样的地方还是挺多的,并且相比Vue2能更好的使用typescript了先从网上找视频学习:https://www.bilibili.com/video/BV1gf4y1W783目录:Vue+TS技术历史变革Vite还是WebpackTypescript你还不熟&... 查看详情
不习惯的vue3起步の一:<scriptsetup>(代码片段)
序Vue3虽然说是Vue2的升级版,但里面不一样的地方还是挺多的,并且相比Vue2能更好的使用typescript了先从网上找视频学习:https://www.bilibili.com/video/BV1gf4y1W783目录:Vue+TS技术历史变革Vite还是WebpackTypescript你还不熟&... 查看详情
不习惯的vue3起步の一:<scriptsetup>(代码片段)
序Vue3虽然说是Vue2的升级版,但里面不一样的地方还是挺多的,并且相比Vue2能更好的使用typescript了先从网上找视频学习:https://www.bilibili.com/video/BV1gf4y1W783目录:Vue+TS技术历史变革Vite还是WebpackTypescript你还不熟&... 查看详情
不习惯的vue3起步三のcomputed和watch(代码片段)
计算属性和侦听器Computed计算属性在模板内表达式非常简单,如果在模板内放入过多的逻辑会使得模板过重并且难以维护。示例:<template><div>admin.friends.filter((item)=>if(item.name=='李四')returntrueelseretu... 查看详情
不习惯的vue3起步三のcomputed和watch(代码片段)
计算属性和侦听器Computed计算属性在模板内表达式非常简单,如果在模板内放入过多的逻辑会使得模板过重并且难以维护。示例:<template><div>admin.friends.filter((item)=>if(item.name=='李四')returntrueelseretu... 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
序看过一些可视化大屏展示地图的例子,准备动手做做。既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用:Vue3ViteTypescriptecharts实现效果:准备工作创建项目因为准备使用Vue3+Vite... 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
序看过一些可视化大屏展示地图的例子,准备动手做做。既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用:Vue3ViteTypescriptecharts实现效果:准备工作创建项目因为准备使用Vue3+Vite... 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
序看过一些可视化大屏展示地图的例子,准备动手做做。既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用:Vue3ViteTypescriptecharts实现效果:准备工作创建项目因为准备使用Vue3+Vite... 查看详情
不习惯的vue3起步三のcomputed和watch(代码片段)
计算属性和侦听器Computed计算属性在模板内表达式非常简单,如果在模板内放入过多的逻辑会使得模板过重并且难以维护。示例:<template><div>admin.friends.filter((item)=>if(item.name=='李四')returntrueelseretu... 查看详情
不习惯的vue3起步二のalias别名ref和reactive(代码片段)
序在之前的学习中,对vue3和vite做了一下简单的了解。也知道了vue3,相较于vue2,对typescript的支持更加好了。所以直接从ts+vue3一起来吧。(之前我对typescript基础也有过学习,忘记也可以翻看资料《typescript... 查看详情
不习惯的vue3起步二のalias别名ref和reactive(代码片段)
序在之前的学习中,对vue3和vite做了一下简单的了解。也知道了vue3,相较于vue2,对typescript的支持更加好了。所以直接从ts+vue3一起来吧。(之前我对typescript基础也有过学习,忘记也可以翻看资料《typescript... 查看详情
vue3项目起步之代码规范,element-plusaxios集成
.editorconfig文件这个可以在多人协作的情况下保持一些规范vscode的话需要借助这个插件2prettier借助这个插件可以快速地让你的代码变好看(默认)我们想借助命令行的格式化就得安装包了npminstallprettier-D如果我们想搭配自... 查看详情
vueuse是怎么封装vue3provide/inject的?(代码片段)
...或若干个层级使用了。看看VueUse的createInjectionState是怎么封装Provide的,并且怎么避免Provide的问题。介绍createInjectionState:创建可以注入组件的全局状态。//useCounterStore.tsconst[useProvideCounterStore,useCounterStore]=createInjectionState((initialValu... 查看详情
vue3项目封装vuex的mapxxx,以及封装请求库(代码片段)
...store对象,所以我们如果像vue2一样直接使用会报错。封装mapActions我按照vue2的方式 查看详情
我的代码习惯---高封装性
之前维护公司ERP的时候,感觉有很多代码,感觉很多的地方写的很乱.当时只是觉得很乱,现在想来,它很多的乱都可以归结为代码封装性太低. 封装性的本质封装性的本质是,一个类自己管理自己的【数据】,和与之相关的【方法】.... 查看详情
vue3富文本组件封装wangeditor(代码片段)
...xff0c;报搜不到model.js,没找到解决方案都不好用,封装过程中存在bug最后找到了wangeditorhttps://www.wangeditor.com/v5/for-frame.html#%E9 查看详情