前端Vue 3 的组合 API 如何请求数据Word格式.docx
- 文档编号:17133915
- 上传时间:2022-11-28
- 格式:DOCX
- 页数:16
- 大小:735.94KB
前端Vue 3 的组合 API 如何请求数据Word格式.docx
《前端Vue 3 的组合 API 如何请求数据Word格式.docx》由会员分享,可在线阅读,更多相关《前端Vue 3 的组合 API 如何请求数据Word格式.docx(16页珍藏版)》请在冰豆网上搜索。
组合API的入口
接下来我们将通过HackerNewsAPI来获取一些热门文章,HackerNewsAPI返回的数据结构如下:
{
"
hits"
:
[
objectID"
24518295"
title"
Vue.js
3"
url"
},
{...},
]
}
我们通过ui>
li将新闻列表展示到界面上,新闻数据从hits遍历中获取。
<
template>
ul>
li
v-for="
item
of
key="
item.objectID"
>
a
href="
item.url"
{{item.title}}a>
li>
script>
import
{
reactive
}
from
'
vue'
export
default
setup()
const
state
=
reactive({
hits:
[]
})
return
state
在讲解数据请求前,我看先看看setup()方法,组合API需要通过setup()方法来启动,setup()返回的数据可以在模板内使用,可以简单理解为Vue2里面data()方法返回的数据,不同的是,返回的数据需要先经过reactive()方法进行包裹,将数据变成响应式。
组合API中请求数据
在Vue2中,我们请求数据时,通常需要将发起请求的代码放到某个生命周期中(created或mounted)。
在setup()方法内,我们可以使用Vue3提供的生命周期钩子将请求放到特定生命周期内,关于生命周期钩子方法与之前生命周期的对比如下:
生命周期
可以看到,基本上就是在之前的方法名前加上了一个on,且并没有提供onCreated的钩子,因为在setup()内执行就相当于在created阶段执行。
下面我们在mounted阶段来请求数据:
reactive,
onMounted
onMounted(async
()
=>
data
await
fetch(
).then(rsp
rsp.json())
state.hits
data.hits
最后效果如下:
Demo
监听数据变动
HackerNews的查询接口有一个query参数,前面的案例中,我们将这个参数固定了,现在我们通过响应式的数据来定义这个变量。
input
type="
text"
v-model="
query"
/>
query:
onMounted((async
`
现在我们在输入框修改,就能触发state.query同步更新,但是并不会触发fetch重新调用,所以我们需要通过watchEffect()来监听响应数据的变化。
onMounted,
watchEffect
fetchData
async
(query)
onMounted(()
fetchData(state.query)
watchEffect(()
由于watchEffect()首次调用的时候,其回调就会执行一次,造成初始化时会请求两次接口,所以我们需要把onMounted中的fetchData删掉。
-
watchEffect()会监听传入函数内所有的响应式数据,一旦其中的某个数据发生变化,函数就会重新执行。
如果要取消监听,可以调用watchEffect()的返回值,它的返回值为一个函数。
下面举个例子:
stop
if
(state.query
===
vue3'
)
//
当
query
为
vue3
时,停止监听
stop()
当我们在输入框输入"
vue3"
后,就不会再发起请求了。
返回事件方法
现在有个问题就是input内的值每次修改都会触发一次请求,我们可以增加一个按钮,点击按钮后再触发state.query的更新。
input"
button
@click="
setQuery"
搜索button>
input:
setQuery
state.query
state.input
setQuery,
可以注意到button绑定的click事件的方法,也是通过setup()方法返回的,我们可以将setup()方法返回值理解为Vue2中data()方法和methods对象的合并。
原先的返回值state变成了现在返回值的一个属性,所以我们在模板层取数据的时候,需要进行一些修改,在前面加上state.。
state.input"
state.hits"
返回数据修改
作为强迫症患者,在模板层通过state.xxx的方式获取数据实在是难受,那我们是不是可以通过对象解构的方式将state的数据返回呢?
class="
search-btn"
ul
results"
setup(props,
ctx)
省略部分代码...
...state,
setQuery,
答案是『不可以』。
修改代码后,可以看到页面虽然发起了请求,但是页面并没有展示数据。
state在解构后,数据就变成了静态数据,不能再被跟踪,返回值类似于:
[],
为了跟踪基础类型的数据(即非对象数据),Vue3也提出了解决方案:
ref()。
ref
count
ref(0)
console.log(count.value)
count.value++
1
上面为Vue3的官方案例,ref()方法返回的是一个对象,无论是修改还是获取,都需要取返回对象的value属性。
我们将state从响应对象改为一个普通对象,然后所有属性都使用ref包裹,这样修改后,后续的解构才做才能生效。
这样的弊端就是,state的每个属性在修改时,都必须取其value属性。
但是在模板中不需要追加.value,Vue3内部有对其进行处理。
ref,
ref('
),
ref([])
state.hits.value
fetchData(state.query.value)
state.query.value
state.input.value
有没有办法保持state为响应对象,同时又支持其对象解构的呢?
当然是有的,Vue3也提供了解决方案:
toRefs()。
toRefs()方法可以将一个响应对象变为普通对象,并且给每个属性加上ref()。
toRefs,
...toRefs(state),
Loading与Error状态
通常,我们发起请求的时候,需要为请求添加Loading和Error状态,我们只需要在state中添加两个变量来控制这两种状态即可。
error:
false,
loading:
state.error
false
state.loading
true
try
catch
同时在模板使用这两个变量:
div
v-if="
loading"
Loading
...div>
v-else-if="
error"
Something
went
wrong
v-else>
展示Loading、Error状态:
将数据请求逻辑抽象
用过umi的同学肯定知道umi提供了一个叫做useRequest的Hooks,用于请求数据非常的方便,那么我们通过Vue的组合API也可以抽象出一个类似于useRequest的公共方法。
接下来我们新建一个文件useRequest.js:
toRefs,
reactive,
(options)
url
options
data:
{},
result
fetch(url).then(res
res.json())
state.data
result
catch(e)
run,
...toRefs(state)
然后在App.vue中引入:
search"
data.hits"
item.u
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端Vue 的组合 API 如何请求数据 前端 Vue 组合 如何 请求 数据