Nuxt3 封装request请求

2024-08-29 23:28
文章标签 封装 请求 request nuxt3

本文主要是介绍Nuxt3 封装request请求,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Nuxt3已经为我们提供了 $fetch 直接用就好

  1. 首先在目录utils下创建 api.js 跟 request.js 两个文件,api文件是用来写具体的接口函数的,request是用来二次封装 $fetch 以达到适配我们项目的需要。
  2. 以下是我的request.js封装代码,可按需要修改
/*** @description 同步请求封装* @param {String} method 请求类型:get,post,delete,put...* @param {String} url  请求地址,不包含请求域名,如:/api/test* @param {Object} options  请求参数* @returns data or error*/
export const apiUse = async (url, method, options) => {// 当前locale将被存储在locale变量中const nuxtApp = useNuxtApp(); // 获取引入nuxt的第三方模块对象const runConfig = useRuntimeConfig(); // 获取环境变量const baseUrl = runConfig.public.baseUrl;const reqUrl = baseUrl + url;options = {method,headers: {"Content-Type": "application/json",},body: { // post 请求参数存放在body内,get请求参数放到params内...options,token: "",platform: "h5",language: nuxtApp.$i18n.locale.value,},};const {data,error} = await useFetch(reqUrl, options);if (error.value) {return error.value;} else {return data.value;}
};/*** @description 异步请求封装* @param {String} method 请求类型:get,post,delete,put...* @param {String} url  请求地址,不包含请求域名,如:/api/test* @param {Object} options  请求参数* @description key 一定要有,否则刷新会造成接口错误*/
export const asyncFetchData = async (url, method, options) => {const nuxtApp = useNuxtApp();const runConfig = useRuntimeConfig();const baseUrl = runConfig.public.baseUrl;const reqUrl = baseUrl + url;const key = url.split('/')[url.split('/').length - 1] //这里取接口最后的名称做keyconst {data,pending,error,refresh} = await useAsyncData(key, () => $fetch(reqUrl, { // useAsyncData也可以用useLazyAsyncData,区别就是useLazyAsyncData会等待SSR渲染完成在执行接口,而useLazyAsyncData是接口执行完成执行SSR渲染method,headers: {"Content-Type": "application/json",},body: {...options,token: "",platform: "h5",language: nuxtApp.$i18n.locale.value,},}));return {data,pending,error,refresh};
}/*** @description 此为apiUse的封装调用实例*/export const fGET = (url, params) => {return apiUse(url, "GET", params);
};export const fPOST = (url, params) => {return apiUse(url, "POST", params);
};export const fPUT = (url, params) => {return apiUse(url, "put", params);
};export const fDELETE = (url, params) => {return apiUse(url, "delete", params);
};/*** @description 此为asyncFetchData的调用实例*/
export const GET = (url, params) => {return asyncFetchData(url, 'GET', params);
};export const POST = (url, params) => {return asyncFetchData(url, "POST", params);
};export const PUT = (url, params) => {return asyncFetchData(url, "put", params);
};export const DELETE = (url, params) => {return asyncFetchData(url, "delete", params);
};
  1. 以下是我的api.js封装代码,可按需要修改
import {GET,POST,PUT,DELETE,fGET,fPOST,fPUT,fDELETE,
} from "./request"/*** @desc 根据Id查询隐私政策等文章* @param params 页面传递过来的参数*/
export const getNotice = (params) => {return POST('/sale/info/detail', params)
}
  1. 页面中使用接口方法

/*** @description 接口在页面中使用教程* 在页面中 不需要再Import 声明接口名,直接使用。因为Nuxt3会自动引用* getNotice 是api.js文件中封装的接口实例,仅需要输入参数即可。* then回调的是接口返回的结果,包含data,pending,error,refresh四种,可根据情况使用*/
getNotice({id: 1
}).then((res) => {const {data,error} = resif (error) {console.log(error.value)}else{console.log(data.value)}
})

这篇关于Nuxt3 封装request请求的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1119148

相关文章

Python实现简单封装网络请求的示例详解

《Python实现简单封装网络请求的示例详解》这篇文章主要为大家详细介绍了Python实现简单封装网络请求的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录安装依赖核心功能说明1. 类与方法概览2.NetHelper类初始化参数3.ApiResponse类属性与方法使用实

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

SpringBoot请求参数传递与接收示例详解

《SpringBoot请求参数传递与接收示例详解》本文给大家介绍SpringBoot请求参数传递与接收示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录I. 基础参数传递i.查询参数(Query Parameters)ii.路径参数(Path Va

使用Python的requests库来发送HTTP请求的操作指南

《使用Python的requests库来发送HTTP请求的操作指南》使用Python的requests库发送HTTP请求是非常简单和直观的,requests库提供了丰富的API,可以发送各种类型的HT... 目录前言1. 安装 requests 库2. 发送 GET 请求3. 发送 POST 请求4. 发送

Python用Flask封装API及调用详解

《Python用Flask封装API及调用详解》本文介绍Flask的优势(轻量、灵活、易扩展),对比GET/POST表单/JSON请求方式,涵盖错误处理、开发建议及生产环境部署注意事项... 目录一、Flask的优势一、基础设置二、GET请求方式服务端代码客户端调用三、POST表单方式服务端代码客户端调用四

python运用requests模拟浏览器发送请求过程

《python运用requests模拟浏览器发送请求过程》模拟浏览器请求可选用requests处理静态内容,selenium应对动态页面,playwright支持高级自动化,设置代理和超时参数,根据需... 目录使用requests库模拟浏览器请求使用selenium自动化浏览器操作使用playwright

SpringBoot监控API请求耗时的6中解决解决方案

《SpringBoot监控API请求耗时的6中解决解决方案》本文介绍SpringBoot中记录API请求耗时的6种方案,包括手动埋点、AOP切面、拦截器、Filter、事件监听、Micrometer+... 目录1. 简介2.实战案例2.1 手动记录2.2 自定义AOP记录2.3 拦截器技术2.4 使用Fi

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.