VUE3中运用axios处理后端数据

2023-05-16

(1)在src下新建一个http文件夹,文件夹下新建一个index.js

(2)在index.js文件中引入axios

(3)在index.js里面写axios实例和拦截器

具体内容:

import axios from 'axios'

// 创建一个 axios 实例

const service = axios.create({

baseURL: 'https://service-c281p5uq-1306002440.hk.apigw.tencentcs.com', // 所有的请求地址前缀部分

timeout: 60000, // 请求超时时间毫秒

// withCredentials: true, // 异步请求携带cookie

headers: {

// 设置后端需要的传参类型

'Content-Type': 'application/json',

// 'token': 'your token',

'X-Requested-With': 'XMLHttpRequest',

},

})

// 添加请求拦截器

service.interceptors.request.use(

function (config) {

// 在发送请求之前做些什么

return config

},

function (error) {

// 对请求错误做些什么

// console.log(error)

return Promise.reject(error)

}

)

// 添加响应拦截器

service.interceptors.response.use(

function (response) {

// 对响应数据做点什么

return response;

},

function (error) {

// 对响应错误做点什么

return Promise.reject(error);

}

)

export default service

(4)又在src目录下新建一个文件夹apis,文件夹里面新建一个index.js文件

这里面是写具体的请求方法,引入之前在http文件夹下的index.js文件

具体内容:

import API from '../http/index'

/* banner(轮播图)数据 */

function postBanner(type1) {

return API.post(`/banner?type=${type1}`).then((res) => {

return res.data.banners;

})

}

/* 二维码key生成接口 */

function getErWeiMaKey() {

return API.get(`/login/qr/key?timerstamp=${Date.now()}`)

}

/* 二维码生成接口 */

function getErWeiMa(key) {

return API.get(`/login/qr/create?key=${key}&qrimg=true&timerstamp=${Date.now()}`)

}

/* 二维码登录状态 */

function getErWeiMaStatus(key) {

// console.log(key)

return API.get(`/login/qr/check?key=${key}&qrimg=true&timerstamp=${Date.now()}`)

}

/* 用户登录状态 */

function loginStatus() {

return API.post(`/login/status?timerstamp=${Date.now()}`).then((res) => {

return res.data

})

}

/* 退出登陆 */

function logout() {

return API.get('/logout').then((res) => {

return res.data

})

}

export { postBanner, getErWeiMaKey, getErWeiMa, getErWeiMaStatus, loginStatus }

(5)在vue页面中引入需要的方法

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE3中运用axios处理后端数据 的相关文章

  • DoraCloud for Proxmox桌面云上启用NVIDIA Tesla P4的vGPU功能

    Proxmox virtualization environment xff0c 简称PVE xff0c 是一个开源免费的基于linux的企业级虚拟化方案 xff0c 功能不输专业收费的VMware 简单的说 xff0c PVE是一个基于D
  • 【meta-learning】经典工作MAML和Reptile(demo理解meta-learning机制)

    Meta Learning MAML ICML 17 MAML和模型结构 任务无关 xff0c 唯一的要求只是模型有参数就可以 MAML产生一个权重的初始化 xff0c 其他模型再使用少量的样本就能在其基础上进行fine tuning 因此
  • 语音识别功能集成总结

    一 场景 业务需求 xff0c 需要集成语音识别功能 xff0c 供移动端使用 二 调研 经过初步了解 xff0c 决定集成国内主流的三家厂商 xff0c 科大讯飞 百度 腾讯 讯飞不用说 xff0c 在语音识别这块之前被评为全球最聪明的5
  • 技巧1 python|django接收参数数据类型转换(数组-列表,对象-字典,json)举例用法

    1 接收的参数是中文乱码 xff08 E7等 xff09 django 中 xff1a 引入quote 引入后红线处点击红色小灯 xff0c 点安装 span class token keyword from span urllib spa
  • WEEK4 二分与贪心

    DDL的恐惧 xff1a 题干 xff1a ZJM 有 n 个作业 xff0c 每个作业都有自己的 DDL xff0c 如果 ZJM 没有在 DDL 前做完这个作业 xff0c 那么老师会扣掉这个作业的全部平时分 所以 ZJM 想知道如何安
  • Ubuntu中的dpkg命令

    dpkg是Debian Package的缩写 xff0c 是专门为Debian开发的软件包管理系统 xff0c 方便安装 管理 更新 近来在安装chrome的时候 xff0c 一开始使用sudo apt get install命令 xff0
  • 分布式事务实战--go语言的saga事务

    我们团队在引入go语言做微服务的过程中 xff0c 遇见了分布式事务的强需求 我们的交易中心涉及大量的业务 xff0c 包括了商品 库存 各类营销活动 商品权限等等 xff0c 按照我们微服务的设计 xff0c 需要拆分到多个微服务 原先由
  • openstack安装故障排除经验

    1 OpenStack的部署过程遇到的问题可归纳总结为配置文件问题 配置步骤缺失 等 2 故障通常有以下几种情况 xff1a xff08 1 xff09 时间同步问题 xff0c 两 xff08 多 xff09 个节点间时间不同步 xff0
  • 【已解决】 Windows11安装WindowsSubsystemForAndroid时报错VClibs错误

    管理员终端输入以下代码安装 xff0c WindowsSubsystemForAndroid add Appxpackage 34 MicrosoftCorporationII WindowsSubsystemForAndroid 1 7
  • SQL解析引擎Apache Calcite

    1 什么是Apache Calcite Apache Calcite 是一款开源SQL解析工具 可以将各种SQL语句解析成抽象语法术AST Abstract Syntax Tree 之后通过操作AST就可以把SQL中所要表达的算法与关系体现
  • C# 使用Selenium

    一 介绍 xff1a Selenium 是一个用于Web应用程序测试的工具 Selenium测试直接运行在浏览器中 xff0c 就像真正的用户在操作一样 1 Selenium Webdriver xff08 也就是Selenium2 xff
  • CentOS 7关闭与启用图形化界面记录

    1 关闭图形界面命令 systemctl set default multi user target 2 查看启动模式 systemctl get default 显示 graphical targe 则代表是 图形化界面模式 显示 mul
  • ubuntu下conda虚拟环境的操作,cuda,cudnn版本的查询, pytorch的安装

    一 ubuntu下conda虚拟环境的操作 随着深度学习的发展 xff0c tensorflow keras pytorch等深度学习框架的兴起和发展 xff0c 或者多用户的使用情况 xff0c 使得在ubuntu下我们可能需要安装多个深
  • dos 设置环境变量

    1 查看环境变量 echo path 2 设置环境变量 set path 61 path C your path
  • H264--2--语法及结构

    名词解释 场和帧 xff1a 视频的一场或一帧可用来产生一个编码图像 在电视中 xff0c 为减少大面积闪烁现象 xff0c 把一帧分成两个隔行的场 片 xff1a 每个图象中 xff0c 若干宏块被排列成片的形式 片分为I片 B片 P片和
  • 强化练习6:判断一字符串是否为回文,是返回1,不是返回0,出错返回-1

    题目 xff1a 判断一字符串是否为回文 xff0c 是返回1 xff0c 不是返回0 xff0c 出错返回 1 程序如下 xff1a include lt stdio h gt int fun char p if p 61 61 NULL
  • debian 服务器安装图形界面

    本人由于习惯了Ubuntu的图形界面 xff0c 实际上 呢 xff0c 是被Windows给带坏了 虽然全 控制台 很流弊 xff0c 但看着还是很不舒服 xff0c 所以就想着 安装 一个图形界面 其实很简单的说 xff0c 就是几行命
  • 如何在Ubuntu 20.04 上安装 Xrdp 服务器(远程桌面)

    本文最先发布在 xff1a https www itcoder tech posts how to install xrdp on ubuntu 20 04 Xrdp 是一个微软远程桌面协议 xff08 RDP xff09 的开源实现 xf
  • 分布式事务最经典的七种解决方案

    随着业务的快速发展 业务复杂度越来越高 xff0c 几乎每个公司的系统都会从单体走向分布式 xff0c 特别是转向微服务架构 随之而来就必然遇到分布式事务这个难题 xff0c 这篇文章总结了分布式事务最经典的解决方案 xff0c 分享给大家
  • 如何在 Ubuntu 20.04 上安装 Ruby

    本文最先发布在 xff1a https www itcoder tech posts how to install ruby on ubuntu 20 04 Ruby 是当今最流行的语言之一 它有简洁的语法 xff0c 并且注重简单和生产力

随机推荐

  • 如何在 Ubuntu 20.04 上安装 Tomcat 9

    本文最先发布在 xff1a https www itcoder tech posts how to install tomcat 9 on ubuntu 20 04 这篇指南描述如何在 Ubuntu 20 04 上安装和配置 Tomcat
  • 如何在 Ubuntu 20.04 上安装 Yarn

    本文最先发布在 xff1a https www itcoder tech posts how to install yarn on ubuntu 20 04 Yarn 是一个 JavaScript 包管理器 xff0c 它兼容于 npm x
  • 如何在 Ubuntu 20.04 上安装和使用 Docker Compose

    本文最先发布在 xff1a https www itcoder tech posts how to install and use docker compose on ubuntu 20 04 Docker Compose 是一个命令行工具
  • 如何在 Ubuntu 20.04 上安装 VirtualBox

    本文最先发布在 xff1a https www itcoder tech posts how to install virtualbox on ubuntu 20 04 VirtualBox 是一个开源的 xff0c 跨平台的虚拟化软件 x
  • 如何在 Ubuntu 20.04 启用 SSH

    本文最先发布在 xff1a https www itcoder tech posts how to enable ssh on ubuntu 20 04 Secure Shell SSH 是一个网络协议 xff0c 它主要被用来加密客户端和
  • 如何在 Ubuntu 20.04 上安装 Vagrant

    本文最先发布在 xff1a https www itcoder tech posts how to install vagrant on ubuntu 20 04 Vagrant是一个命令行工具 xff0c 用于构建和管理虚拟开发环境 默认
  • 如何在 Ubuntu 20.04 上安装 GCC(build-essential)

    本文最先发布在 xff1a https www itcoder tech posts how to install gcc on ubuntu 20 04 GNU 编译器集合是一系列用于语言开发的编译器和库的集合 xff0c 包括 C C
  • 如何在 Ubuntu 20.04 上安装和配置 Redis

    本文最先发布在 xff1a https www itcoder tech posts how to install and configure redis on ubuntu 20 04 Redis 是一个开源的在内存存储键值对数据的存储程
  • 如何在 Ubuntu 20.04 上安装 PHP

    本文最先发布在 xff1a https www itcoder tech posts how to install php on ubuntu 20 04 PHP 是世界上使用广泛的服务端编程语言之一 很多著名的 CMS 和框架 xff0c
  • 用python轻松完成一个分布式事务TCC,保姆级教程

    什么是分布式事务 xff1f 银行跨行转账业务是一个典型分布式事务场景 xff0c 假设A需要跨行转账给B xff0c 那么就涉及两个银行的数据 xff0c 无法通过一个数据库的本地事务保证转账的ACID xff0c 只能够通过分布式事务来
  • 如何在 Ubuntu 20.04 上安装 Spotify

    本文最先发布在 xff1a https www itcoder tech posts how to install spotify on ubuntu 20 04 Spotify是一个音乐流媒体服务商 xff0c 它可以让你和无数的歌曲亲密
  • SSH 操作实践指南

    本文最先发布在 xff1a https www itcoder tech posts ssh practice SSH 是我们经常要和远程服务器交互使用的工具 下面是一些实践中总结的 SSH 操作经验 xff1a 一 如何选择 SSH ke
  • 如何在 Ubuntu 20.04 上安装 R

    本文最先发布在 xff1a https www itcoder tech posts how to install r on ubuntu 20 04 R 是一门开源编程语言和自由的环境 xff0c 主要用于统计分析 绘图 它由 R 基金会
  • 如何在 Ubuntu 20.04 上安装 Mono

    本文最先发布在 xff1a https www itcoder tech posts how to install mono on ubuntu 20 04 Mono 是一个平台 xff0c 基于 ECMA ISO 标准 xff0c 用于开
  • 如何在 Ubuntu 20.04 上安装和使用 Composer

    本文最先发布在 xff1a https www itcoder tech posts how to install and use composer on ubuntu 20 04 Composer 是一个 PHP 依赖管理器 xff08
  • 3分钟在线开通优惠费率的微信支付商户号(商户收款码)

    1 问 xff1a 为什么要开通微信商户号 xff1f 答 xff1a 因为微信个人收款 xff0c 不支持信用卡支付 xff0c 无法提供经营报表 xff0c 无法支持线上支付等 关于微信个人收款码与商家码区别 xff0c 参考 xff1
  • 设置git使用vimdiff比较差异

    原文 xff1a http hi baidu com drdr blog item 57de1e95665a81047af48062 html 修改git的如下2条配置 xff1a git config global diff tool v
  • YUV图像格式

    原文 xff1a http blog csdn net zhongnanjun 3 article details 3934938 YUV xff08 亦称YCrCb xff09 是被欧洲电视系统所采用的一种颜色编码方法 xff08 属于P
  • mime types 大全--来自ubuntu /etc/mime.types

    MIME TYPES and the extensions that represent them The format of this file is a MIME type on the left and zero or more fi
  • VUE3中运用axios处理后端数据

    xff08 1 xff09 在src下新建一个http文件夹 xff0c 文件夹下新建一个index js xff08 2 xff09 在index js文件中引入axios xff08 3 xff09 在index js里面写axios实