Vue——axios的二次封装

文章目录

  • 一、请求和传递参数
    • 1、get 请求
    • 2、post 请求
    • 3、axios 请求配置
  • 二、axios 的二次封装
    • 1、配置拦截器
    • 2、发送请求
  • 三、API 的解耦
    • 1、配置文件对应的请求
    • 2、获取请求的数据
  • 四、总结


一、请求和传递参数

在 Vue 中,发送请求一般在 created 钩子中,当然放在 mounted 钩子中也没问题。

以下请求的前提都是安装了 axios,并且 import axios from 'axios' 成功导入

Axios官网链接

1、get 请求

get 请求传参,在地址里面通过 ?xxx=123 的形式

  // Vue 环境中async created() {let res = await axios.get("http://testapi.xuexiluxian.cn/api/slider/getSliders?xxx=123");console.log(res);}

2、post 请求

post 请求传参,在第二个参数里面传递

  // Vue 环境中async created() {let res = await axios.post('http://testapi.xuexiluxian.cn/api/course/mostNew', {pageNum: 1,pageSize: 5})console.log(res);}

3、axios 请求配置

请求配置里面可以设置很多属性

  // Vue环境中async created() {let res = await axios({url: 'http://testapi.xuexiluxian.cn/api/course/mostNew',method: 'post', // 默认是 get 请求headers: {}, // 自定义请求头data: {  // post 请求,前端给后端传递的参数pageNum: 1,pageSize: 5}, params: {}, // get 请求,前端给后端传递的参数timeout: 0, // 请求超时responseType: 'json' // 返回的数据类型})console.log(res);}

二、axios 的二次封装

目的:方便统一管理

注意:先安装 axios 才可以使用,终端键入:npm i axios,之后回车安装它

1、配置拦截器

在 src 目录下新建 utils 文件夹,该文件夹下创建 request.js 文件

request.js 文件

  1. 首先创建 axios 对象
  2. 添加请求拦截器(前端给后端的参数)
  3. 添加响应拦截器(后端给前端的数据)
import axios from 'axios'// 创建 axios 对象
const instance = axios.create({baseURL: 'http://testapi.xuexiluxian.cn/api', // 根路径timeout: 2000 // 网络延时
})// 添加请求拦截器 => 前端给后端的参数【还没到后端响应】
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器 => 后端给前端的数据【后端返回给前端的东西】
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response;
}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});// 最终返回的对象
export default instance

2、发送请求

在需要发请求的组件中,导入 request.js, 之后发送请求即可

App.vue 组件

  1. 在需要使用的组件中 导入 request
  2. 直接发送请求即可
<template><div id="app">发送请求</div>
</template><script>
import request from "./utils/request";
export default {name: "App",data() {return {};},created() {// get 请求request({url: "/course/category/getSecondCategorys",}).then((res) => {console.log(res);});// post 请求request({url: "/course/mostNew",method: "post",data: {pageNum: 1,pageSize: 5,},}).then((res) => {console.log(res);});}
}
</script>

三、API 的解耦

API 解耦的目的:为了同一个接口可以多次使用; 为了方便 api 请求统一管理

1、配置文件对应的请求

在 src 目录下新建 api 文件夹,该文件夹下创建 xxx.js 文件,配置对应请求

import { axios } from "@/utils/request"
import requestJpaas from "../../utils/geteway"
import serve from "./serve"
const { getData } = requestJpaas
// 服务
const prefix = "/jpaas-jiop-web-server"
const api = {// 获取用户信息getUserInfo: prefix + "/interface/buttjoint/jisbuttsuccess",
}export const yhzxAPI = {// 获取用户信息getUserInfo(params) {return axios({url: api.getUserInfo,method: "get",params})},// 网关接口queryList(appid, interface_id, params) {return getData({appid,interface_id,params})}
}

2、获取请求的数据

App.vue 组件

从文件定义的请求中导入对应函数
获取数据

<template><div></div>
</template><script>
import { yhzxAPI } from '@/api/yhzx/yhzx.js'export default {name: 'IndexView',data() {return {}},created() {this.getRecord()},mounted() {},methods: {getRecord() {let params = {title: document.title,address: encodeURIComponent(location.href),type: 'xxxxxx',}yhzxAPI.getUserInfo(params).then((result) => {if (result.code == 200 && result.success) {console.log('我的足迹添加成功!')} else {console.log('我的足迹添加失败或未登录!')}}).catch((err) => {console.log(err)})},}
}
</script><style scoped lang="less"></style>

四、总结

对 axios 的二次封装,在企业级项目中是 必须 要配置的。
因为经过封装的 axios,更容易使用和管理,并且可以 减少代码量,让 逻辑更清晰

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

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

相关文章

LiveGBS伴侣

【1】LiveGBS 简介 LiveGBS是一套支持国标(GB28181)流媒体服务软件。 国标无插件;提供用户管理及Web可视化页面管理&#xff1b; 提供设备状态管理&#xff0c;可实时查看设备是否掉线等信息&#xff1b; 实时流媒体处理&#xff0c;PS&#xff08;TS&#xff09;转ES&…

githubssh配置

GitHub SSH配置是用来将本地计算机与GitHub服务器之间建立安全连接的一种方法。它允许用户通过SSH密钥进行身份验证&#xff0c;从而实现无需每次都输入用户名和密码的登录过程。 以下是在Windows环境下配置GitHub SSH的步骤&#xff1a; 首先&#xff0c;在本地计算机上打开…

GFPGAN 集成Flask 接口化改造

GFPGAN是一款腾讯开源的人脸高清修复模型&#xff0c;基于github上提供的demo&#xff0c;可以简单的集成Flask以实现功能接口化。 GFPGAN的安装&#xff0c;Flask的安装请参见其他文章。 如若使用POSTMAN进行测试&#xff0c;需使用POST方式&#xff0c;form-data的请求体&am…

5G 数字乡村数字农业农村大数据中心项目农业大数据建设方案PPT

导读&#xff1a;原文《5G 数字乡村数字农业农村大数据中心项目农业大数据建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。以下是部分内容&#xff0c; 喜…

TCP协议的重点知识点

TCP协议的重点知识点 TCP(传输控制协议)是一种面向连接、可靠的数据传输协议,工作在传输层,提供可靠的字节流服务。它是互联网协议栈中最重要、最复杂的协议之一,也是面试中常被问到的知识点。本文将详细介绍TCP协议的各个重要概念。 TCP基本特性 TCP主要具有以下基本特性: …

云原生周刊:CNCF 宣布 KEDA 毕业 | 2023.8.28

开源项目推荐 KDash KDash 是一个用 Rust 构建的简单快速的 Kubernetes 仪表板。它提供了一个终端界面&#xff0c;用于监视和管理 Kubernetes 集群。该仪表板具有多种功能&#xff0c;包括节点指标、资源监视、自定义资源定义、容器日志流式传输、上下文切换等。它还支持不同…

Django(9)-表单处理

django支持使用类创建表单实例 polls/forms.py from django import forms class NameForm(forms.Form):your_nameforms.CharField(label"Your name",max_length100)这个类创建了一个属性&#xff0c;定义了一个文本域&#xff0c;和它的label和最大长度。 polls/vi…

浅析Linux SCSI子系统:设备管理

文章目录 概述设备管理数据结构scsi_host_template&#xff1a;SCSI主机适配器模板scsi_host&#xff1a;SCSI主机适配器主机适配器支持DIF scsi_target&#xff1a;SCSI目标节点scsi_device&#xff1a;SCSI设备 添加主机适配器构建sysfs目录 添加SCSI设备挂载LunIO请求队列初…

二、Tomcat 安装集

一、Tomcat—Docker 1. 拉取镜像 # 1、拉取镜像&#xff08;tomcat版本8&#xff0c;jre版本8&#xff09;。 docker pull tomcat:8-jre82. 启动容器 # 2、启动一个tomcat容器。 docker run -id --name tomcat -p 8080:8080 镜像ID # 3、宿主机里新建/root/tomcat目录&#x…

从零开始的Hadoop学习(三)| 集群分发脚本xsync

1. Hadoop目录结构 bin目录&#xff1a;存放对Hadoop相关服务&#xff08;hdfs&#xff0c;yarn&#xff0c;mapred&#xff09;进行操作的脚本etc目录&#xff1a;Hadoop的配置文件目录&#xff0c;存放Hadoop的配置文件lib目录&#xff1a;存放Hadoop的本地库&#xff08;对…

华为云Stack的学习(三)

四、华为云Stack公共组件 1.华为云Stack公共负载均衡方案介绍 1.1 LVS原理 LVS是四层负载均衡&#xff0c;建立在OSI模型的传输层之上&#xff0c;所以效率非常高。 LVS有两种转发模式&#xff1a; NAT模式的转发主要通过修改IP地址&#xff08;位于OSI模型的第三层网络层&…

Jmeter(二十八):beanshell的使用

Beanshell 是一种轻量级的 Java 脚本,纯 Java 编写的,能够动态的执行标准 java 语法及一些扩展脚本语法,类似于 javaScript,在工作中可能用的多的就是: Beanshell 取样器:跟Http取样器并列Beanshell前置处理器:一般放在Http请求下,在请求前处理一些数据Beanshell后置处…

基于 xhr 实现 axios

基于 xhr 实现 axios 上面我们讲到二次封装 axios &#xff0c;但是现在我们尝试完全脱离 axios&#xff0c;自己实现一个 axios&#xff0c;由于 axios 底层是基于 xhr 做了二次封装&#xff0c;所以我们也可以尝试一下。 xhr 二次封装 src/plugins/xhr.js /*** 请求拦截器…

Java学习路线

开启你的学习之旅&#xff08;学习路线&#xff09; 一、学习方法 下面知识点的讲解&#xff0c;基本都会配套笔记&#xff0c;可以在我的专栏中查看对应的知识点。每个知识点的课程推荐都是我之前看过的视频&#xff0c;质量比较高才会推荐&#xff0c;但现在视频更新都比较…

python web GUI框架-NiceGUI 教程(二)

python web GUI框架-NiceGUI 教程&#xff08;二&#xff09; streamlit可以在一些简单的场景下仍然推荐使用&#xff0c;但是streamlit实在不灵活&#xff0c;受限于它的核心机制&#xff0c;NiceGUI是一个灵活的web框架&#xff0c;可以做web网站也可以打包成独立的exe。 基…

大数据——一文熟悉HBase

1、HBase是什么 HBase是基于HDFS的数据存储&#xff0c;它建立在HDFS文件系统上面&#xff0c;利用了HDFS的容错能力&#xff0c;内部还有哈希表并利用索引&#xff0c;可以快速对HDFS上的数据进行随时读写功能。 Hadoop在已经有一个HiveMapReduce结构的数据读写功能&#x…

②matlab桌面和编辑器

目录 matlab编辑器练习 运行脚本 matlab编辑器练习 您可以通过点击灰色代码框在脚本中输入命令。 准备就绪后&#xff0c;您可以通过点击蓝色的提交按钮提交代码。 任务 在脚本中输入命令 r 3。 2.任务 在脚本中添加命令 x pi*r^2。 附加练习 当您在实时编辑器中完成…

解锁安全高效办公——私有化部署的WorkPlus即时通讯软件

在当今信息时代&#xff0c;高效的沟通与协作对于企业的成功至关重要。然而&#xff0c;随着信息技术的发展&#xff0c;保护敏感信息和数据安全也变得越来越重要。为了满足企业对于安全沟通和高效办公的需求&#xff0c;我们隆重推出私有化部署的WorkPlus即时通讯软件&#xf…

OpenCV简介

OpenCV简介 OpenCV&#xff08;开源计算机视觉库&#xff1a;http://opencv.org&#xff09;是一个开源库&#xff0c;包含数百种计算机视觉算法。OpenCV 具有模块化结构&#xff0c;主要包括下列模块&#xff1a; 核心功能&#xff08;core&#xff09; - 定义基本数据结构的…

iOS砸壳系列之三:Frida介绍和使用

当涉及从App Store下载应用程序时&#xff0c;它们都是已安装的iOS应用&#xff08;IPA&#xff09;存储在设备上。这些应用程序通常带有保护的代码和资源&#xff0c;以限制用户对其进行修改或者逆向工程。 然而&#xff0c;有时候&#xff0c;为了进行调试、制作插件或者学习…