作者目前正在学习Nuxt3中，创作该文章的目的一方面是为了加深印象，提高学习效果，另一方面是将学习成果做一个总结，方便将来复习。在上一篇文章的最后，我们简单介绍了一下在Nuxt.js中如何编写API接口，有了接口就需要我们去发送请求获取数据，在Nuxt.js中有五种请求方法，下面让我们来介绍一下

$fetch

$fetch是比较底层的全局请求方法之一，他和我们熟悉的fetch语法完全一致

const { result } = await $fetch('/api/myapi', { method: 'post', body: {name:'GG_Bond'}})

$fetch的参数包含了一个必传的API地址和一个可选的配置项，包含了常见的method,header,body,query等配置项

其他四种方法都是基于$fetch之上的封装

useFetch

useFetch是我们在Nuxt中最常用的请求方法之一，它是基于useAsyncData和$fetch的封装

它根据URL和获取选项自动生成一个key，根据服务器路由为请求URL提供类型提示，并推断API响应类型。

const { data: count, pending, error,refresh} = await useFetch('/api/myapi')

useLazyFetch

此方法等价于在配置项中添加了lazy:true的useFetch方法，它和useFetch方法的区别在于，useLazyFetch方法不会阻塞路由，这也就意味着，我们在使用useLazyFetch时需要考虑到response值为null的情况，可以通过default选项设置默认值的方式来处理

const { data: count, pending, error } = await useLazyFetch('/api/myapi')

useAsyncData

在useFetch方法中，接受url并获取数据，而在useAsyncData中可能包含了更复杂的异步操作，它与useFetch在功能上是相同的，但是方法的第一个参数需要我们传入一个key ，第二个参数为数据请求的处理函数，它等价于useAsyncData(key, () => $fetch(url))

useAsyncData有两种用法，一种传Key,一种不传key,但即使我们不传，Nuxt也会自动帮我们生成一个

const { data, pending,refresh } = await useAsyncData(()=>$fetch(`/api/detail/${router.params.id}`);

useAsyncLazyData

相信看到这里你会想，该方法和上面的useLazyFetch一样，它等同于添加了lazy:true配置项的useAsyncData方法，事实上确实如此。在使用该方法时，要考虑到response为null的情况，同样可以通过配置项default设置默认值来处理。

refresh

在实际业务逻辑中，经常会遇到需要获取最新数据的场景，例如下拉刷新，分页，过滤等。这时我们可以用数据请求API返回的refresh来实现

需要注意的是，如果请求中的key没有改变，我们通过refresh拿到的也不是最新的数据，而是之前缓存的数据，要想拿到最新的数据，我们需要在url中添加一个动态值，并作为函数返回值传递给useFetch

const { data, refresh } = useFetch('/api/myapi') 




refresh()// 数据没有刷新

const page = ref(1);




const { data: users, pending, refresh, error } = await useFetch(() => `users?page=${page.value}&take=6`, { baseURL: config.API_BASE_URL });


function previous() {
page.value--;
refresh();//数据刷新了
}

function next() {
page.value++;
refresh();//数据刷新了
}

Nuxt生命周期

生命周期钩子函数的存在使得我们可以在特定的时间完成特定的操作，熟悉Vue的朋友们想必对生命周期并不陌生，在Nuxt.js中，生命周期分为三类：Nuxt钩子，Vue钩子，Nitro钩子。这是因为在Nuxt中整合了Vue,Nitro两个前后端运行时，再加上框架自身的生命周期，下面我们来逐个了解一下。

Nuxt Hooks

import { defineNuxtModule } from '@nuxt/kit'




export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async (nuxt: Nuxt) => { 
      // 在这里配置 nuxt
    })
  }
})

Vue App Hooks

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('page:start', () => {
        /* your code goes here */
     })
})

### Nitro App Hooks

Nitro App Hook会在Nitro 引擎运行时调用，我们可以在回调中操作服务端引擎的行为，下面的案例中，我们用render:html钩子增加了HTML代码片段，用render:response钩子在响应时打印日志

export default defineNitroPlugin((nitroApp) => {




nitroApp.hooks.hook('render:html', (html, { event }) => {


console.log('render:html', html)


html.bodyAppend.push('<hr>Appended by custom plugin')

})



nitroApp.hooks.hook('render:response', (response, { event }) => {

console.log('render:response', response)

})

})

与Vue相比，Nuxt.js中的生命周期钩子相对更加复杂，需要我们去深入探索，于实践中运用，知行合一，方能牢牢掌握，官方文档有一份详细的列表，便于我们了解更多钩子nuxt.com/docs/api/ad…

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# Nuxt.js