请求相关内容

nuxt3.0提供的多种数据访问 API

上一次是nuxt3.0的安装和约定式的使用
接下来就是使用请求调整，Nuxt3 中提供的多种数据访问 API：

$fetch；
使用时机:
首屏渲染，调用发生在服务端；
客户端激活之后，调用发生在客户端。
useAsyncData；
该方法和 useFetch 相比功能上是相同的，但是更底层，使用方法类似于 ahooks 库中的 useRequest，我们需要提供一个用于缓存去重的 key 和数据请求的处理函数。也就是说，useFetch 相当于：useAsyncData(key, () => $fetch(url))。
useLazyAsyncData；
该方法等效于useFetch设置了lazy选项为 true，不同之处在于它不会阻塞路由导航，这意味着我们需要处理 data 为 null 的情况（或者通过 default 选项给 data 设置一个默认值）。
useFetch；
页面、组件或者插件中可以使用useFetch获取任意 URL 资源。useFetch是对useAsyncData和$fetch的封装，只需传入请求的 URL 或者一个请求函数即可，一些选项会自动填入，用起来最简洁，是最推荐的数据获取方式。
useLazyFetch
该方法等效于useFetch设置了lazy选项为 true，不同之处在于它不会阻塞路由导航，这意味着我们需要处理 data 为 null 的情况（或者通过 default 选项给 data 设置一个默认值）。

使用封装

$fetch、useFetch封装方法

// http请求封装 //
import { ElMessage } from 'element-plus'export const fetchConfig = {baseURL: getBaseUrl(),//请求配置headers: { ContentType: 'multipart/form-data' }
}//请求体封装
function useGetFetchOptions(options = {}){options.baseURL = options.baseURL ?? fetchConfig.baseURLoptions.headers = options.headers ?? {ContentType: fetchConfig.headers.ContentType}options.initialCache = options.initialCache ?? falseoptions.lazy = options.lazy ?? falseoptions.showError = options.showError ?? trueoptions.needReject = options.needReject ?? false// 用户登录，默认传tokenconst Authorization = useCookie("cookies名称")// if(Authorization.value){ options.headers.Authorizations = Authorization.value// }return options
}//http请求封装
export async function useHttp(key,url,options = {}){options = useGetFetchOptions(options)options.key = keyif(options.$){// 通过插件或中间件调用时return new Promise((resolve, reject) => {$fetch(url, options).then(res => {if (res.code == 200) {resolve(res);const toggleTokenBool = useState('tokenBool')toggleTokenBool.value = false} else if (res.code == 20001) {// token失效处理reject(res)const toggleTokenBool = useState('tokenBool')if(!toggleTokenBool.value){toggleTokenBool.value = trueconst route = useRoute();const token = useCookie("websiteAuthorization");token.value = null;ElMessage({ message: '登录已失效，请重新登录！'});navigateTo("/login?from=" + route.fullPath);     } } else {//若需要报错提醒if (process.client && options.showError && res.msg) {ElMessage({ message: res.msg, customClass: "message-zindex" });}if (options.needReject) {resolve(res);}else{reject(res)}}}).catch((err) => {reject(err)})})}else{//路由中调用时return new Promise((resolve, reject) => {useFetch(url, { ...options}).then(({ data, error }) => {if (error.value) {reject(error.value)return}const res = data.valueif (error.value) {reject(error.value);return;}const res = data.value;if (res.code == 200) {resolve(res);  const toggleTokenBool = useState('tokenBool')toggleTokenBool.value = false                } else if (res.code == 20001) {// token失效处理reject(res)const toggleTokenBool = useState('tokenBool')if(!toggleTokenBool.value){toggleTokenBool.value = trueconst route = useRoute();const token = useCookie("websiteAuthorization");token.value = null;ElMessage({ message: '登录已失效，请重新登录！'});navigateTo("/login?from=" + route.fullPath);     } } else {//若需要报错提醒if (process.client && options.showError && res.msg) {ElMessage({ message: res.msg, customClass: "message-zindex" });}if (options.needReject) {resolve(res);}else{reject(res)}}}).catch((err) => {reject(err)})})}
}// GET请求
export function useHttpGet(key,url,options = {}){options.method = "GET"return useHttp(key,url,options)
}// POST请求
export function useHttpPost(key,url,options = {}){options.method = "POST"return useHttp(key,url,options)
}

状态管理(useState/Pinia)、cookie管理(useCookie)

我们可以在项目的根目录新建composables中创建状态管理文件如：composables/state.ts.

useState的使用

内容封装:

//首先引入useState、useCookie
import { useState, useCookie } from "nuxt/app";
//用户详情
export const useInfo = () =>useState("userData", () => {return {data: "",};});
//消息数量
export const messageNum = () =>useState("msgNum", () => {return {data: 0,};});
// token
export const useToken = () => useState("token",()=> "aaadd232cfdfdf23fdf")

pinia的使用

pinia使用

cookie管理(useCookie)

// 获取 Cookie
let tokenCookies = useCookie('token')
// 设置 Cookie
tokenCookies .value = Cookies.value || ''
// 删除  Cookie
tokenCookies .value = undefined || null

token续期

什么是续期呢？为了用户安全，token会出现失效的状态，一般为1~30天。根据华为云等的做法，可以测试出，为保障用户安全，一般token有效期为2H，在1.5h时，后端会将新的token塞入响应头中，再取出替换。

useFetch(url, { ...options,onResponse(ctx) {if(ctx.response.headers?.get('Authorizations')){const Authorization = useCookie("cookies名称");Authorization.value = ctx.response.headers?.get('Authorizations')}}})

$fetch(url, {...options,onResponse(ctx) {if(ctx.response.headers?.get('Authorizations')){const Authorization = useCookie("cookies名称");Authorization.value = ctx.response.headers?.get('Authorizations')}}})

nuxt3.0学习-二、nuxt3.0的请求相关内容、状态管理(useState/Pinia)、cookie管理(useCookie)、token续期相关推荐

超级账本Fabric学习(二)Fabric1.0.0网络搭建（中）无业务逻辑处理的Fabric网络
整合三个有依赖关系的yaml文件 1:docker-compose-cli.yaml文件源码解析 2:docker-compose-base.yaml文件源码分析 3:peer-base.yaml文件 ...
TensorFlow2.0学习笔记2-tf2.0两种方式搭建神经网络
目录一,TensorFlow2.0搭建神经网络八股 1)import [引入相关模块] 2)train,test [告知喂入网络的训练集测试集以及相应的标签] 3)model=tf.keras. ...
四、MySQL分页查询 + 子查询复习学习笔记（复习连接查询相关内容详解）
8:分页查询应用场景:当要显示的数据,一页显示不全,需要分页提交sql请求语法: SELECT 查询列表 FROM 表名 [JOIN type JOIN 表2 ON 连接条件 WHERE 筛选条件 ...
Servlet和HTTP请求协议-学习笔记01【Servlet_快速入门-生命周期方法、Servlet_3.0注解配置、IDEA与tomcat相关配置】
Java后端学习路线笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
大数据基础学习二：在VMware虚拟机上安装Ubuntu完整步骤及需要注意的问题（以VMware Workstation 15.1.0 Pro和Ubuntu18.04.3优麒麟版为例）
大数据基础学习二:在VMware虚拟机上安装Ubuntu完整步骤及需要注意的问题 (以VMware Workstation 15.1.0 Pro for Windows和Ubuntu18.04.3优麒 ...
Microsoft .NET Pet Shop 4.0 学习之旅（二） - 项目的引用关系1
Microsoft .NET Pet Shop 4.0 学习之旅(二) 项目的引用关系1 <?xml:namespace prefix = o ns = "urn:schemas-mi ...
【Vue2.0学习】—Vuex工作原理图（二十五）
[Vue2.0学习]-Vuex工作原理图(二十五) 一. Vuex 是什么? 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写 ...
Tensorflow2.0学习笔记（二）
Tensorflow2.0学习笔记(二)--Keras练习文章目录 Tensorflow2.0学习笔记(二)--Keras练习前言二.使用步骤 1.实现步骤及代码 2.下载 Fashion MN ...
Tensorflow2.0学习笔记（二）北大曹健老师教学视频第五讲
Tensorflow2.0学习笔记(二)北大曹健老师教学视频第五讲返回目录理论部分主要写点以前看吴恩达视频没有的或者不太熟悉的了. 5.1卷积计算过程实际项目中的照片多是高分辨率彩色图,但待优化 ...

nuxt3.0学习-二、nuxt3.0的请求相关内容、状态管理(useState/Pinia)、cookie管理(useCookie)、token续期