alova的二次封装

alova的二次封装

  • 为什么要进行alova二次封装
  • 二次封装的具体步骤
    • 1. index.js
    • 2. api.js
    • 3. service.js
    • 4. 在Vue中使用

为什么要进行alova二次封装

上篇文章介绍了alova的基本使用方法:alova详解,对比axios,alova的具体使用,但是每次都要引入,还需要写请求路径,能不能只写一个方法就能发送请求呢,当然可以,因此在开发过程中,我们一般将alova进行二次封装进行请求。

二次封装的具体步骤

首先在src目录下新建alova文件夹,在此文件夹下新建index.js,api.js,service.js三个文件。

1. index.js

//index.js
import { createAlova } from 'alova';
// v2.0
// import GlobalFetch from 'alova/GlobalFetch';
// v3.0
import adapterFetch from 'alova/fetch';
import VueHook from 'alova/vue'export const AlovaInstance = createAlova({baseURL: '你的域名',statesHook: VueHook,// 请求适配器,这里我们使用fetch请求适配器requestAdapter: adapterFetch (),// 设置全局的请求拦截器,与axios相似beforeRequest() {},responded: {// 请求成功的拦截器// 当使用GlobalFetch请求适配器时,第一个参数接收Response对象// 第二个参数为当前请求的method实例,你可以用它同步请求前后的配置信息onSuccess: async (response, method) => {if (response.status >= 400) {throw new Error(response.statusText);}const json = await response.json();if (json.code !== 200) {// 抛出错误或返回reject状态的Promise实例时,此请求将抛出错误throw new Error(json.message);}// 解析的响应数据将传给method实例的transformData钩子函数,这些函数将在后续讲解return json.data;},// 请求失败的拦截器// 请求错误时将会进入该拦截器。// 第二个参数为当前请求的method实例,你可以用它同步请求前后的配置信息onError: (error, method) => {alert(error.message);},// 请求完成的拦截器// 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时,可以在创建alova实例时指定全局的`onComplete`拦截器,例如关闭请求 loading 状态。// 接收当前请求的method实例onComplete: async method => {// 处理请求完成逻辑}
}
});

2. api.js

// api.js
import { AlovaInstance } from './index'
// 请求头
const headers = { 'Content-Type': 'application/json;charset=UTF-8' }
// 请求超时时间
const timeout = 5000export const Alova = {// 这是get请求createGet(url: string, params?: Record<string, any>) {return AlovaInstance.Get(url, {headers,params,localCache: {mode: 'placeholder', // 设置缓存模式为持久化占位模式expire: 60 * 10 * 1000 // 缓存时间},timeout})},// 这是post请求createPost(url: string, data: Record<string, any>, params?: Record<string, any>) {return AlovaInstance.Post(url, data, {headers,params})},// 这是put请求createPut(url: string, data: Record<string, any>, params?: Record<string, any>){return AlovaInstance.Put(url, data, {headers,params,});},// 这是delete请求createDelete(url: string, params?: Record<string, any>){return AlovaInstance.Delete(url, {headers,params,});},
}

3. service.js

// service.js
import { Alova } from './api'// 封装 GET 请求
export function getDemo() {return Alova.createGet('/posts')
}
// 封装 POST 请求
export function postDemo(data) {return Alova.createPost('/posts', data);
}
// 封装 PUT 请求
export function putDemo(data) {return Alova.createPut('/posts/1', data);
}// 封装 DELETE 请求
export function deleteDemo() {return Alova.createDelete('/posts/1');
}

4. 在Vue中使用

<template><div><button @click="handleGet">get</button><button @click="handlePost">post</button><button @click="handlePut">put</button><button @click="handleDelete">delete</button></div>
</template><script lang="ts" setup>import { getDemo,postDemo,putDemo,deleteDemo } from '../alova/service';// 定义异步函数handleGetasync function handleGet() {const response = await getDemo();}// 定义异步函数handlePostasync function handlePost() {const response = await postDemo({title: 'foo',body: 'bar',userId: 1,});}// 定义异步函数handlePut    async function handlePut() {const response = await putDemo({ id: 1,title: 'foo1',body: 'bar1',userId: 1,});}// 定义异步函数handleDeleteasync function handleDelete() {const response = await deleteDemo();}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51606.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt】QLCDNumberQProgressBarQCalendarWidget

目录 QLCDNumber 倒计时小程序 相关属性 QProgressBar 进度条小程序 相关设置 QLCDNumber QLCDNumber是Qt框架中用于显示数字或计数值的小部件。通常用于显示整数值&#xff0c;例如时钟、计时器、计数器等 常用属性 属性说明intValueQLCDNumber显示的初始值(int类型)va…

企业版邮箱适用哪些企业

企业邮箱适合哪些企业呢&#xff1f;企业版邮箱为企业提供安全、稳定、集成的邮件服务&#xff0c;支持初创、中小、大型企业及特定行业需求。ZohoMail作为优质提供商&#xff0c;提供多层安全措施、移动访问、集成能力及定制化服务&#xff0c;满足不同规模企业需求。 一、企…

2023年系统架构设计师考试总结

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17812187.html 上周六参加了2023年系统架构设计师考试&#xff0c;这次考试与以前有点区别&#xff0c;是第一次采用电子化考试&#xff0c;也是教材改版后的第一次考试。 说说考前准备&#xff1a;为了准备这次考试…

流媒体服务器Nginx with RTMP安装和配置

以下是在 CentOS 7.6 上安装和配置 Nginx with RTMP module 的详细步骤&#xff1a; 1. 安装 Nginx with RTMP 模块 1.1 安装必要的依赖和工具 首先&#xff0c;更新系统并安装必要的依赖包&#xff1a; sudo yum update -y sudo yum install -y epel-release sudo yum ins…

基于微信小程序的校园警务系统/校园安全管理系统/校园出入管理系统

摘要 伴随着社会以及科学技术的发展&#xff0c;小程序已经渗透在人们的身边&#xff0c;小程序慢慢的变成了人们的生活必不可少的一部分&#xff0c;紧接着网络飞速的发展&#xff0c;小程序这一名词已不陌生&#xff0c;越来越多的学校机构等都会定制一款属于自己个性化的小程…

利用arthas热更新class文件

利用arthas热更新class文件 背景&#xff1a;发现一个bug&#xff0c;家里难以复现&#xff0c;需要在现场环境更新几行代码验证。 arthas-boot version: 3.7.1 java -jar arthas-boot.jar启动arthas 1、利用arthas的sc命令查找确定类名称 sc com.**2、反编译为java文件 …

《通讯世界》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问&#xff1a;《通讯世界》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的第一批认定学术期刊。 问&#xff1a;《通讯世界》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;科学技术部 主办单位&#xff1a;中国科学技…

C++ //练习 15.35 实现Query类和Query_base类,其中需要定义rep而无须定义eval。

C Primer&#xff08;第5版&#xff09; 练习 15.35 练习 15.35 实现Query类和Query_base类&#xff0c;其中需要定义rep而无须定义eval。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块&#xff1a; #include<iostream>…

如何从零开始搭建一个django+vue的前后端分离的自动化测试平台

嗨&#xff0c;大家好&#xff0c;我是兰若姐姐&#xff0c;今天手把手教大家搭建一个djangovue的前后端分离的自动化测试平台 一、前提条件 安装Python安装Node.js和npm&#xff08;或者yarn&#xff09;安装MySQL数据库安装Git 二、目录结构 project-root/├── backend…

关于虚拟机在桥接模式下连接网络问题的记录

2024年7月28日03:49:19 环境&#xff1a;ubuntu22.04 desktop 虚拟机 问题&#xff1a;使用wget下载nginx安装包时出现问题&#xff0c;443端口持续无连接成功回复。 随后在确定配置ip无问题&#xff0c;检查了其正常访问互联网&#xff0c;随后试图ping niginx网站&#xff…

基于OSS前端直传的分片上传以及断点续传

一、大文件分片上传 原型 大文件如果直接上传的话由于nginx的限制会导致响应500报错&#xff0c;或者响应时间过长导致响应超时 并且大文件上传有如下缺点 上传时间长: 对于大文件&#xff0c;直接上传可能需要较长时间&#xff0c;特别是在网络速度较慢或不稳定的情况下。这…

反射API安全白皮书:深入解析与防御策略

一、引言 反射API是编程中一种强大的工具&#xff0c;它允许程序在运行时动态地查询和操作对象的属性和行为。然而&#xff0c;这种灵活性也带来了显著的安全风险&#xff0c;如代码注入、信息泄露和绕过安全检查等。本文旨在深入解析反射API的安全问题&#xff0c;并提出相应…

ChatGPT秘籍:如何用AI阅读文献,提升你的学术效率

在当今信息泛滥的时代&#xff0c;迅速高效地搜集与处理信息显得尤为关键。本文将聚焦于如何利用ChatGPT高效阅读文献与文档&#xff0c;并提供详尽的技巧、心得以及实用的指令和插件解析&#xff0c;助你充分发挥ChatGPT的潜能。无论你是学生、科研人员还是行业从业者&#xf…

Laravel中的请求与响应:构建高效Web应用的秘诀

Laravel中的请求与响应&#xff1a;构建高效Web应用的秘诀 在Web开发的世界中&#xff0c;Laravel是一个优雅的PHP框架&#xff0c;以其简洁的语法和强大的功能而闻名。Laravel的请求&#xff08;Request&#xff09;和响应&#xff08;Response&#xff09;处理机制是构建高效…

雪花算法的一些问题解析

前言 最近做项目&#xff0c;有些老旧项目&#xff0c;需要生成分布式唯一ID&#xff0c;不允许重复&#xff0c;此时如果要对其他中间件和数据库依赖小&#xff0c;那么就需要一套固定的ID生成规则&#xff0c;雪花算法就正当合适&#xff0c;当时Twitter就是用来存储数据库I…

JSP基础语法与指令

任何语言都有自己的语法&#xff0c;在java中有&#xff0c;JSP作为java技术的一种应用&#xff0c;它拥有一些自己扩充的语法(了解知道即可&#xff01;&#xff01;&#xff01;)&#xff0c; Java所有语法都支持&#xff01; JSP表达式 <html><head><title…

【Redis 初阶】初识 Redis

一、了解 Redis Redis 官网&#xff1a;Redis - The Real-time Data Platform Redis 是一种基于键值对&#xff08;key-value&#xff09;的 NoSQL 数据库。与很多键值对数据库不同的是&#xff0c;Redis 中的 key 都是 string&#xff08;字符串&#xff09;&#xff0c;值&a…

计算机毕业设计LSTM+Tensorflow股票分析预测 基金分析预测 股票爬虫 大数据毕业设计 深度学习 机器学习 数据可视化 人工智能

|-- 项目 |-- db.sqlite3 数据库相关 重要 想看数据&#xff0c;可以用navicat打开 |-- requirements.txt 项目依赖库&#xff0c;可以理解为部分技术栈之类的 |-- data 原始数据文件 |-- data 每个股票的模型保存位置 |-- app 主要代码文件夹 | |-- mod…

汽车辐射大?技术来救它:整车辐射抗扰发射天线仿真建模及性能预测

摘要 针对车辆电磁辐射抗扰度测试条件要求高、预测难度大的问题&#xff0c;通过仿真软件建立电磁抗扰度测试发射天线&#xff08;简称抗扰发射天线&#xff09;模型及无车情况下的电磁抗扰试验场强环境&#xff0c;为整车电磁辐射抗扰性能的预测搭建了一个仿真平台。 验证试验…