代码模版-vue使用axios调用请求

文章目录

  • 简介
  • 步骤一:安装 axios 依赖
  • 步骤二:自己配置请求 request
  • 步骤三:在 main.js 中指定 request
  • 步骤四:其他组件的 js 的请求

简介

vue 常常使用 axios 包来调用请求

步骤一:安装 axios 依赖

cnpm install --save axios

步骤二:自己配置请求 request

在 src/ 新建 utils,其中新建 requests.js

import axios from "axios"
import {ElLoading, ElMessage} from "element-plus";const contentTypeForm = "application/x-www-form-urlencoded;charset=utf-8"
const contentTypeJson = "application/json"
const contentTypeFile = "multipart/form-data"// 配置请求,这个 config 有请求的相关信息
const request = (config) => {// 初始化 contentType 和 paramslet contentTypelet paramsif (config.dataType === "json") {contentType = contentTypeJson} else if (config.dataType === "form") {contentType = contentTypeForm} else if (config.dataType === "file") {contentType = contentTypeFilelet param = new FormData()for (let key in config.params) {param.append(key, config.params[key])}params = param} else {contentType = contentTypeJson}// 配之1: 配置请求实例const instance = axios.create({baseURL: "api",timeout: 10 * 1000,headers: {"Content-Type": contentType,"X-Requested-With": "XMLHttpRequest",}})// 配置2: request 发送前拦截器let loading = nullinstance.interceptors.request.use((config) => {// 如果 showLoading 为 true 就用 element plus 中的家在样式,但是一直存在直到后面 resp 再关闭if (config.headers.showLoading) {// 加载中样式,拷贝自 element plus 官网loading = ElLoading.service({lock: true,text: '加载中...',background: 'rgba(0, 0, 0, 0.7)',})}return config},(error) => {if (loading) {// 如果 loading 存在就把加载样式关了loading.close()}// 然后再输出 error 提醒样式,拷贝自 element plus 官网ElMessage({showClose: true,message: '发送请求失败',type: 'error',})return Promise.reject("发送请求失败")},)// 配置3: response 响应前拦截器instance.interceptors.response.use((response) => {// 响应前 close 加载样式if (loading) {loading.close()}const responseData = response.data// 做一些响应码的判断,一般响应结构/*code: 0,msg: "success",data: {},*//*if (responseData.code === xxx) {// todo: 该响应码后的操作return Promise.reject(responseData.message)} else if (responseData.code === yyy) {// todo: 该响应码后的操作return Promise.reject(responseData.message)}*/// 正常情况下返回响应数据return responseData},(error) => { // 服务 504 或者 404 了,网络有问题或者服务关闭了if (loading) {loading.close()}return Promise.reject("响应异常")},)// 配置4: 配置发送 post 请求return instance.post(config.url, params).catch((error) => {// 这里用了 element plus 样式,展现响应后样式ElMessage({showClose: true,message: error,type: 'error',})return null})
}export default request

步骤三:在 main.js 中指定 request

src/main.js 中添加

import { createApp } from 'vue'
import App from './App.vue'import request from "./utils/request";const app = createApp(App)// app.use(...)// 这里配置上使用 axios 自己配置 export 出来的 request
app.config.globalProperties.Request = request// app 绑定

步骤四:其他组件的 js 的请求

在其他应用组件中请求,就会用到这个 request

import getCurrentInstance from "vue"
const proxy = getCurrentInstance()// @click 事件触发
const foo = () => {// function1 执行,异步一个函数async () => {// todo sth.// wait 得在 async 中,这里进行请求,可以注意前面配置的 axios req 会生效let result = await proxy.Request({url: "",params: {account: "",password: "",checkCode: "",},})}// function2 执行
}

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

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

相关文章

万字长文 | Hadoop 上云: 存算分离架构设计与迁移实践

一面数据原有的技术架构是在线下机房中使用 CDH 构建的大数据集群。自公司成立以来,每年都保持着高速增长,业务的增长带来了数据量的剧增。 在过去几年中,我们按照每 1 到 2 年的规划扩容硬件,但往往在半年之后就不得不再次扩容。…

探索未来:Java在人工智能领域的崛起

在人工智能(AI)发展的浪潮中,Java作为一种广泛应用的编程语言,正逐渐崭露头角。本文将探讨Java在人工智能领域的应用和发展前景,揭示Java如何适应并推动人工智能技术的创新和普及。 Java与人工智能:从过去到…

《Redis 核心技术与实战》课程学习笔记(八)

String 类型为什么不好用了? String 类型可以保存二进制字节流,只要把数据转成二进制字节数组,就可以保存了。String 类型并不是适用于所有场合的,它有一个明显的短板,就是它保存数据时所消耗的内存空间较多。 为什么…

Unity Shader - SV_POSITION 和 TEXCOORD[N] 的varying 在 fragment shader 中输出的区别

起因 因另一个TA同学问了一个问题 我抱着怀疑的心态,测试了一下 发现 varying 中的 sv_position 和 texcoord 的值再 fragment shader 阶段还真的不一样 而且 sv_position 还不是简单的 clipPos/clipPos.w 的操作 因此我自己做了一个试验: 结果还是不一…

Scala集合 - 不可变数组

水善利万物而不争,处众人之所恶,故几于道💦 目录 一、两种创建方式 二、数组赋值 三、五种数组遍历方式 四、添加元素 一、两种创建方式 创建时指定数组存放的数据类型及数组的大小,,大小确定后不可以变化 val arr01 new Array[…

电脑应用程序发生异常怎么办?

有时候我们打开电脑上面的某个软件时,会打不开,并且会弹出如下的错误提示“应用程序发生异常 未知的软件异常(xxx),位置为xx”。相信大多数的人在使用电脑的时…

Pytorch基本使用—激活函数

✨1 介绍 ⛄ 1.1 概念 激活函数是神经网络中的一种数学函数,它被应用于神经元的输出,以决定神经元是否应该被激活并传递信号给下一层。常见的激活函数包括Sigmoid函数、ReLU函数、Tanh函数等。 🎄 1.2 性质 激活函数是神经网络中的一种重…

为什么单片机可以直接烧录程序的原因是什么?

单片机(Microcontroller)可以直接烧录程序的原因主要有以下几点: 集成性:单片机是一种高度集成的芯片,内部包含了处理器核心(CPU)、存储器(如闪存、EEPROM、RAM等)、输入…

校园wifi网页认证登录入口

很多校园wifi网页认证登录入口是1.1.1.1 连上校园网在浏览器写上http://1.1.1.1就进入了校园网 使 用 说 明 一、帐户余额 < 0.00元时&#xff0c;帐号被禁用&#xff0c;需追加网费。 二、在计算中心机房上机的用户&#xff0c;登录时请选择新建帐号时给您指定的NT域&…

windows 搭建ssh服务

1、官网下载安装包&#xff1a;mls-software.com 2、点击安装&#xff08;一直默认即可&#xff09; 3、配置 opensshServer 4、成功登录

场用以111

PearOCR&#xff1a;PearOCR&#xff0c;在线图片转文字&#xff0c;免费OCR&#xff0c;在线图片文字提取&#xff0c;本地运算&#xff0c;无上传 haikei&#xff1a;Haikei Wormhole&#xff1a;Wormhole - Simple, private file sharing AIPIX&#xff1a;https://photo…

Python深度强化学习实战 ——OpenAI Gym-CarRacing自动驾驶项目

&#x1f4ad; 写在前面&#xff1a;本篇是关于 OpenAI Gym-CarRacing 自动驾驶项目的博客&#xff0c;面向掌握 Python 并有一定的深度强化学习基础的读者。GYM-Box2D CarRacing 是一种在 OpenAI Gym 平台上开发和比较强化学习算法的模拟环境。它是流行的 Box2D 物理引擎的一个…

灌区信息化智能测控一体化闸门系统解决方案

一、方案背景 闸门是节水灌溉工程中重要组成部分。在农田灌区中&#xff0c;一方面存在传统手摇闸门&#xff0c;未能实现自动化、数字化&#xff0c;另一方面部分灌区闸站虽然部分实现了自动化控制&#xff0c;但是由于闸站较多&#xff0c;有些位置较为偏僻&#xff0c;部分水…

Jmeter接口关联(一)【使用json层级方式提取值】与python中使用层级方式提取值 完成接口关联

文章目录 前言一、按照 json 的路径来提取 ​​​​​​​&#xff08;1&#xff09;成功匹配到数据的案例&#xff08;按照层级匹配&#xff09;&#xff08;2&#xff09;失败未匹配到数据的案例&#xff08;没有按照层级匹配&#xff09;json提取器二、使用完整的接口关联&a…

selenium自动化测试工具

Selenium是一个用于测试网站的自动化测试工具&#xff0c;支持各种浏览器包括Chrome、Firefox、Safari等主流界面浏览器&#xff0c;同时也支持phantomJS无界面浏览器。 查看chrome版本&#xff0c;114.05735.199 去 http://chromedriver.storage.googleapis.com/index.html 网…

python视频基础处理

前言 本文主要介绍读取视频文件&#xff0c;保存视频帧图片&#xff1b;将帧图片合成为视频&#xff1b;读取视频文件&#xff0c;对视频帧图片进行心处理&#xff0c;将处理完的帧图片合成视频&#xff0c;以完成对视频的处理。 一、基本概念 视频是由一系列图像构成的&…

密码学证明方案寒武纪大爆发——扩容、透明性和隐私的变革潜力

1. 引言 前序博客有&#xff1a; ZKP大爆炸 本文主要参考&#xff1a; StarkWare 2023年6月博客 Cambrian Explosion of Cryptographic Proofs----The transformative potential for scalability, transparency, and privacy2023年3月Eli Ben-Sasson在The 13th BIU Winter …

nginx页面优化与防盗链

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、nginx页面优化1.版本号1.1 查看版本号1.2 修改版本号1.2.1 修改配置文件1.2.2 修改源码文件&#xff0c;重新编译安装 2.nginx的日志分割3.nginx的页面压缩3.1 …

微软亚洲研究院推出AI编译器界“工业重金属四部曲”

编者按&#xff1a;编译器在传统计算科学中一直是一个重要的研究课题。在人工智能技术快速发展和广泛应用的今天&#xff0c;人工智能模型需要部署在多样化的计算机硬件架构上。同时&#xff0c;训练和部署大型人工智能模型时又对硬件性能有着更高的要求&#xff0c;有时还需根…

macOS Ventura 13.5beta5(22G5072a)发布

系统介绍 黑果魏叔 7 月 11 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.5 开发者预览版 Beta 5 更新&#xff08;内部版本号&#xff1a;22G5072a&#xff09;&#xff0c;本次更新距离上次发布隔了 12 天。 macOS Ventura 带来了台前调度、连续互通相机、Fa…