位置: IT常识 - 正文

Nuxt3实战系列之网络请求篇(nuxt怎么用)

编辑:rootadmin
Nuxt3实战系列之网络请求篇

推荐整理分享Nuxt3实战系列之网络请求篇(nuxt怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nuxt怎么用,nuxt支持vue3吗,nuxt 教程,nuxt怎么用,nuxt怎么样,nuxt怎么样,nuxt好用吗,nuxt好用吗,内容如对您有帮助,希望把文章链接给更多的朋友!

Nuxt3提供了4种方式使得我们可以异步获取数据

useAsyncDatauseLazyAsyncData (useAsyncData+lazy:true)useFetchuseLazyFetch (useFetch+lazy:true)

4种方式中,其实核心的就是useAsyncData和useFetch。这两个方法不同于Nuxt2中的asyncData和fetch。接下来我们先来好好分析下这两个方法。

useAsyncData

我们知道,在Nuxt2中,asyncData方法类似于一个生命周期函数,它在服务端或路由更新之前被调用。方法的参数是当前页面的上下文对象,我们一般是利用 asyncData方法来获取数据并返回给当前组件,以避免请求放在客户端执行时带来的数据延迟出现问题。

export default {data() {return { project: 'default' }},asyncData(context) {return { project: 'nuxt' }}}

在Nuxt3中,useAsyncData可以看做是异步获取数据场景的一个封装,而且变成了一个主动调用函数,原则上可以在任何时机调用。

// 用法const {data: Ref<DataT>,// 返回的数据结果pending: Ref<boolean>,// 是否在请求状态中refresh: (force?: boolean) => Promise<void>,// 强制刷新数据error?: any // 请求失败返回的错误信息} = useAsyncData(key: string, // 唯一键,确保相同的请求数据的获取和去重fn: () => Object,// 一个返回数值的异步函数options?: { lazy: boolean, server: boolean }// options.lazy,是否在加载路由后才请求该异步方法,默认为false// options.server,是否在服务端请求数据,默认为true// options.default,异步请求前设置数据data默认值的工厂函数(对lazy:true选项特别有用)// options.transform,更改fn返回结果的函数// options.pick,只从数组中指定的key进行缓存)

从api的设计中可以看出,useAsyncData没有限制我们发起网络请求的方式,同时它还暴露了请求状态,增加了刷新控制,以及对重复获取数据的去重控制等。使用示例如下:

<script setup>const { data } = await useAsyncData('count', () => $fetch('/api/count'))</script><template>Page visits: {{ data }}</template> useFetch

在Nuxt2中,fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。

<template><h1>Stars: {{ $store.state.stars }}</h1></template><script> export default {fetch({ store, params }) {return axios.get('http://my-api/stars').then(res => {store.commit('setStars', res.data)})}} </script>

在Nuxt3中,useFetch实际上是对useAsyncData和$fetch的封装,提供了一个更便捷的封装方法。它相比useAsyncData, 主要做了以下两点处理:

1.它会根据URL和fetch参数自动生成一个key,同时推断出API的响应类型。也就是说不用手动指定key了。 2.它实现了网络请求的具体方式,使用$fetch发起请求,也就是说不需要再手动去实现网络请求的逻辑了。

//useFetch用法const {data: Ref<DataT>,pending: Ref<boolean>,refresh: (force?: boolean) => Promise<void>,error?: any} = useFetch(url: string, options?)// options (继承自 unjs/ofetch options以及 AsyncDataOptions)// 下边的这些参数是useAsyncData的options中没有的// options.method: 请求方式// options.query: url路径参数// options.params: query参数的别名// options.body: 请求体参数,// options.headers: 请求头的配置// options.baseURL: 请求的基础Url地址 实战应用Nuxt3实战系列之网络请求篇(nuxt怎么用)

我们不难发现,useFetch已经具备了网络请求的所有核心功能,虽然该Api主要用于在服务端请求,但它也是做了客户端请求的支持的,只要稍加封装改动,就可以同时用于服务端请求和客户端请求的场景。这样我们也就不用额外再引入像Axios这样的请求库了。

场景1: 如何处理对于带错误码的数据响应

通常我们的接口都不是直接返回数据,而是带了一个错误码和错误信息的对象,比如这样:

// response:{data: {age: 1},code: 1}

在这样的返回结构下,useFetch拿到的数据并不是我们真实想要的数据

const { data } = await useFetch('/api/user/info', {method: 'get'})console.log(data) // 此时data是一个Ref包裹的对象{ data: {age: 1}, code: 1 }const userInfo = unref(data).data //获取真正的数据需要先unref后再去获取data

所以,我们希望能在接口返回时对数据做一下转换,这里其实useFetch提供了相关的option参数,我们可以这样修改

const { data: userInfo} = await useFetch('/api/user/info', {method: 'get',// 处理方式1onResponse({ response }) {response._data = {...response._data.data,}},// 处理方式2// transform: (res) => {// return res.data// },}) 场景2: 如何只在客户端侧发起请求

这样的场景一般用于使用静态化构建部署,但是页面上有些内容是不能在构建时静态化的。这时可以利用server:false参数

// 异步获取当前用户信息const { data: userinfo } = await useMyFetch('/api/auth/userinfo', {server: false})

注意: 这种情况下,如果想在script内直接获取到userinfo的内部值,是获取不到的!官方文档也做了对应的说明:

if you have not fetched data on the server (for example, with server: false), then the data will not be fetched until hydration completes. This means even if you await useFetch on client-side, data will remain null within <script setup>.

如果非要在script中获取数据呢?这里笔者想到两个方案:

1.用$fetch去发起请求 2.用watch监听userinfo的值变化

场景3: 如何将请求结果转为非响应式的数据

这种场景一般用于在客户端发起的请求,我们不需要在页面上渲染响应的数据,只是为了做一些逻辑判断或者需要对数据进行加工。而useFetch请求后的返回值默认都是一个ref对象,我们得先获取内部值。

const { data } = await useMyFetch('/api/get-actiocn-token')// data是一个Ref包裹的对象,需要用unref获取内部值const tokenInfo = unref(data)

如果想直接获取原始数据的话,useFetch原生是不支持的(或者是我现在还不知道怎么实现)。我们只能使用$fetch去实现了。

请求统一封装

针对上述三种场景,笔者分享下自己的封装思路,即在composables目录中实现一个useMyFetch方法,去处理一些通用的逻辑

import type { NitroFetchRequest } from 'nitropack'import type { FetchOptions, FetchResponse } from 'ofetch'import type { UseFetchOptions } from 'nuxt/dist/app/composables/fetch'function transFormResponse({ response }: any) {// 处理后端携带了错误码响应的数据if (response._data && response._data.code)return Promise.reject(response._data)response._data = {...response._data.data,}}/** * 封装$fetch用于简单请求场景 * @param request * @param opts * @returns */export function useClientFetch(request: NitroFetchRequest, opts?: FetchOptions<any>) {return $fetch<FetchResponse<any>>(request, {onResponse: transFormResponse,...opts,})}/** * 抽离useFetch的通用配置 * @param request * @param opts * @returns */export function useMyFetch(request: NitroFetchRequest, opts?: UseFetchOptions<any>) {return useFetch(request, {onResponse: transFormResponse,...opts,})}/** * 实现更便捷的post请求 * @param request * @param opts * @returns */useMyFetch.get = (request: NitroFetchRequest, opts?: UseFetchOptions<any>) => {return useMyFetch(request, {method: 'get',...opts,})}/** * 实现更便捷的post请求 * @param request * @param opts * @returns */useMyFetch.post = (request: NitroFetchRequest, opts?: UseFetchOptions<any>) => {return useMyFetch(request, {method: 'post',...opts,})} 最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。 有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文链接地址:https://www.jiuchutong.com/zhishi/283590.html 转载请保留说明!

上一篇:舍夫沙万的蓝色墙壁,摩洛哥 (© Tatsuya Ohinata/Getty Images)(舍夫沙万的蓝色是什么意思)

下一篇:奇陶尔加尔堡,印度 (© Anand Purohit/Getty Images)(奇托尔加赫城堡)

  • 英特尔首次推出 Meteor Lake Die(英特尔成立)

    英特尔首次推出 Meteor Lake Die(英特尔成立)

  • 身份证号码复制后怎么变成E+17(身份证一键生成)

    身份证号码复制后怎么变成E+17(身份证一键生成)

  • teamviewer无法建立连接原因未知(teamviewer无法建立连接无法连接伙伴)

    teamviewer无法建立连接原因未知(teamviewer无法建立连接无法连接伙伴)

  • 快手别人送的卡怎么领取(快手别人送的卡怎么提现)

    快手别人送的卡怎么领取(快手别人送的卡怎么提现)

  • 微信怎么删除自己的登录信息(微信怎么删除自己的朋友圈)

    微信怎么删除自己的登录信息(微信怎么删除自己的朋友圈)

  • 快手直播间被关闭是什么意思(快手直播间被关闭怎么办)

    快手直播间被关闭是什么意思(快手直播间被关闭怎么办)

  • 宽带端到端测试不正常(宽带端到端测试什么意思)

    宽带端到端测试不正常(宽带端到端测试什么意思)

  • 电脑摄像头黑屏怎么解决(苹果电脑摄像头黑屏)

    电脑摄像头黑屏怎么解决(苹果电脑摄像头黑屏)

  • 滴滴可以第三次申诉吗(滴滴可以第三次预约吗)

    滴滴可以第三次申诉吗(滴滴可以第三次预约吗)

  • 租的充电宝忘记还了(租的充电宝忘记还了怎么买断)

    租的充电宝忘记还了(租的充电宝忘记还了怎么买断)

  • 十代cpu和九代差距(十代cpu对比九代cpu)

    十代cpu和九代差距(十代cpu对比九代cpu)

  • 抬起亮屏在哪设置(抬亮屏幕)

    抬起亮屏在哪设置(抬亮屏幕)

  • 苹果手机的水印设置在哪里可以找到(苹果手机的水印相机在哪里设置)

    苹果手机的水印设置在哪里可以找到(苹果手机的水印相机在哪里设置)

  • 发到群里的图片超过两分钟怎么删除(发到群里的图片过了时间怎么撤回)

    发到群里的图片超过两分钟怎么删除(发到群里的图片过了时间怎么撤回)

  • 微机的开机顺序是(微机的启动顺序是什么?关机顺序是什么?)

    微机的开机顺序是(微机的启动顺序是什么?关机顺序是什么?)

  • 电视有信号没有台是怎么回事(电视有信号没有台)

    电视有信号没有台是怎么回事(电视有信号没有台)

  • 手机imei是什么意思啊(苹果手机imei查询)

    手机imei是什么意思啊(苹果手机imei查询)

  • qq怎么设置优先显示电脑在线(qq怎么设置优先好友)

    qq怎么设置优先显示电脑在线(qq怎么设置优先好友)

  • 华为怎么隐藏软件(华为怎么隐藏软件应用)

    华为怎么隐藏软件(华为怎么隐藏软件应用)

  • qq注销好友会被删除吗(qq注销好友会被自动删除吗)

    qq注销好友会被删除吗(qq注销好友会被自动删除吗)

  • 平板模式可以触屏吗(平板电脑模式能触屏吗)

    平板模式可以触屏吗(平板电脑模式能触屏吗)

  • 交管12123找回密码(交管12123找回密码身份信息不通过)

    交管12123找回密码(交管12123找回密码身份信息不通过)

  • 华为nova5pro可以分屏吗(华为nova5pro可以下载空调遥控器吗)

    华为nova5pro可以分屏吗(华为nova5pro可以下载空调遥控器吗)

  • 如何在Win10家庭版中启用Windows沙盒功能(如何win10家庭版升级专业版)

    如何在Win10家庭版中启用Windows沙盒功能(如何win10家庭版升级专业版)

  • re.findall() 的用法(re.findall()用法)

    re.findall() 的用法(re.findall()用法)

  • testparm命令  测试Samba的设置是否正确无误(检测命令)

    testparm命令 测试Samba的设置是否正确无误(检测命令)

  • 买车哪些费用不该交
  • 企业购置房产进项被折旧怎么处理
  • 幼儿园申报税种及税率
  • 生产能量计入固定成本
  • 递延收益怎么交企业所得税
  • 企业人员信息已存在无需新增
  • 其他收益会计分录
  • 可供出售金融资产会计处理
  • 小企业会计制度科目表
  • 资本公积是属于什么类账户
  • 起征点与免征额的区别
  • 房地产企业销售现房是否预缴增值税
  • 拆迁房视同销售成本可以抵减吗?
  • 进口货物付款计入哪个科目?
  • 出口退税为0的产品明细
  • 专用发票报销时限
  • 纳税人提供植物养护服务属于什么服务
  • 收到工程款退回的账务处理
  • 超市里销售
  • 研发样机转销售合法吗
  • 税务机构
  • 企业研发费用税前抵扣
  • 公司租车交税
  • 学校食堂承包餐饮公司
  • 快捷工具栏在哪儿
  • 办公室椅子固定
  • 粒子效果大全
  • php中session什么意思
  • 公牛牛角
  • php获取手机型号
  • php生成guid
  • php5.5
  • b站怎么进抖音模式
  • 2021高频前端面试题汇总
  • vue中$route
  • 微信小程序开发平台
  • 收到待报解预算收入怎么做分录
  • 自产产品对外赠送的会计处理方法
  • 委托境外机构研发
  • 固定资产有金额界定吗
  • 帝国cms8.0
  • 中餐补助
  • 一般纳税人增值税减免政策2023
  • 异地预缴税金
  • 外贸公司进口关税增值税的帐务处理流程
  • 固定资产置换存货
  • 企业债务重组业务
  • 取得普通发票怎么做账
  • 预提费用年底一定要冲回吗
  • 建筑企业怎么结算成本
  • 库存现金存入银行
  • 过程中必须有哪两种状态
  • 生产成本和主营业务成本金额一样吗
  • 库存现金过多的隐患
  • 分支机构是否需要设立账簿
  • win8电脑恢复系统怎么操作
  • 苹果mac电脑打不开
  • win7系统IE浏览器一点就闪退
  • centos inode
  • win10磁盘占用100%卡死
  • windows保护电脑
  • linux系统编译命令
  • centos mail命令
  • win7系统的桌面图标怎么调出来
  • cocos2dx4.0入门
  • jquery 元素
  • 阿里云一键建站
  • 又拍云cdn配置
  • 编写折半查找的程序
  • JavaScript驾驭网页-获取网页元素
  • node.js快速入门
  • unity3d基本操作
  • 前端开发需要哪些技能
  • javascript基础编程
  • js中倒计时器怎么实现
  • First class: UI design for Android
  • 辽宁事业单位职测考试时间多长
  • 营业执照网上申报入口官网
  • 自然人扣缴端怎么申报个税
  • 中关村税务所上班时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设