当前位置: 首页 > news >正文

vue开发,axios网络请求框架基本用法和封装

axios安装

npm install axios

axios基本用法

  • 默认的get请求,参数用params追加,多个参数通过json对象的方式,例如params:‘{type:“home”,page:1}’
axios({url: 'https://api.videolog.net.cn/baidu/token',params: ''
}).then(value => {console.log("1.默认的get请求:", value.data)
})
  • post方式及添加参数data,data里可以是一个json对象
axios({url: 'https://api.videolog.net.cn/baidu/wenxin',method: 'POST',data: 'hello'
}).then(value => {console.log("1.默认的post请求:", value.data)
})

axios常用方法

  • post请求
axios.post("https://api.videolog.net.cn/baidu/wenxin", "vue").then(value => {console.log("2.post请求测试:"+value.data.data)}).catch(function (error) {// 处理错误console.log(error);});
  • get请求
axios.get("https://api.videolog.net.cn").then(value => {console.log("3.get请求测试"+value.data)}).catch(function (error) {// 处理错误console.log(error);});

axios并发请求

  • 多个请求全部完成后回调。使用all方法,合并多个请求。

//并发请求
axios.all([axios.post("https://api.videolog.net.cn/baidu/wenxin", "hello"),axios.get('https://api.videolog.net.cn/baidu/token')]).then(results => {console.log("4.两个网络请求全部完成后返回:"+results.at(0).data.data)})

axios配置和实例

  • 可以设置全局的baseUrl和超时时间
axios.defaults.baseURL = "https://api.videolog.net.cn";
axios.defaults.timeout = 30000;
  • 也可以不使用全局实例,而是单独根据不同的baseURL创建各自的实例。
import axios from "axios";const axios1 = axios.create({baseURL: "https://api.videolog.net.cn", timeout: 5000})
const axios2 = axios.create({baseURL: "https://api.videolog.net.cn", timeout: 5000})//可以封装接口地址
export class HomeService {static loadNet() {console.log("调用共用组件")axios1({url: 'https://api.videolog.net.cn/baidu/token',params: ''}).then(value => {console.log("1.默认的get请求:", value.data)})}
}//外面可以直接拿到这个实例
export {axios1
}

axios封装和拦截器

import axios from "axios";const axios1 = axios.create({baseURL: "https://api.videolog1.net.cn", timeout: 5000})
const axios2 = axios.create({baseURL: "https://api.videolog.net.cn", timeout: 5000})//请求拦截器
axios1.interceptors.request.use(config => {console.log("请求成功拦截器:",config)//可以在此处设置headerconfig.headers['Content-Type'] = 'application/json;charset=UTF-8'// config.headers['loginToken'] = useUserStore().getTokenreturn config;
}, error => {console.log("请求失败拦截器:",error)
});//响应拦截器
axios1.interceptors.response.use(result => {console.log("响应成功拦截器:",result)return result;
}, error => {console.log("响应失败拦截器:",error)return Promise.reject(error)
});//所有首页相关的请求放到这里。也可以单独抽出一个文件
export class HomeService {static loadTest2() {return axios1({url: '/baidu/token',params: ''})}}//外面可以直接拿到这个实例
export {axios1
}

相关文章:

vue开发,axios网络请求框架基本用法和封装

axios安装 npm install axiosaxios基本用法 默认的get请求,参数用params追加,多个参数通过json对象的方式,例如params:‘{type:“home”,page:1}’ axios({url: https://api.videolog.net.cn/baidu/token,params: }).then(value > {co…...

对比SPI、UART、I2C通信的区别与应用

SPI、UART、I2C通信是常用的数字通信协议,它们在不同的场景下有不同的应用。下面,我将分别介绍它们的特点、区别与应用。 SPI通信 SPI通信是一种串行同步通信协议,它的全称为“Serial Peripheral Interface”。SPI通信是一种单主多从的通信方…...

CentOS7安装MySQL8.0

一、使用Yum安装 1. 使用wget下载MySQL的rpm包 wget https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm2. 安装下载好的rpm包 yum localinstall mysql80-community-release-el7-3.noarch.rpm 3. 安装mysql(该步可能出现问题) yum…...

【Go<—>Java】gRPC测试注意事项

在做go和Java之间gRPC调用之前需要完成以下两项工作: go语言版本的gRPC调用,实现server端和client端Java语言版本的gRPC调用,实现server端和client端 由于gRPC是跨语言的通信协议,所以我们可以相互调用,有以下2种调用…...

java面试题整合

1.Java数据类型 ✅ Java是一种静态类型语言,它具有丰富的数据类型用于声明变量和方法返回类型。Java中的数据类型分为两类:原始数据类型(Primitive Data Types)和引用数据类型(Reference Data Types)。 原…...

2023年12月7日:QT实现登陆界面

#include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//窗口设置this->resize(600,500);//重新设置窗口大小this->setWindowTitle("QQ-盗版");//设置窗口名为QQ-盗版this->setWindowIcon(QIcon("D:\\Qt\\funny\\pi…...

常用的测试用例大全

登录、添加、删除、查询模块是我们经常遇到的,这些模块的测试点该如何考虑 1)登录 ① 用户名和密码都符合要求(格式上的要求) ② 用户名和密码都不符合要求(格式上的要求) ③ 用户名符合要求,密码不符合要求(格式上的要求) ④ 密码符合要求&#xf…...

《python每天一小段》--12 数据可视化《1》

欢迎阅读《Python每天一小段》系列!在本篇中,将使用Python Matplotlib实现数据可视化的简单图形。 文章目录 一、概念(1)安装matplotlib(2)数据可视化实现步骤 二、绘制简单的折线图(1&#xff…...

分类预测 | Matlab实现HPO-GRU【23年新算法】基于猎食者优化算法优化门控循环单元的数据分类预测

分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机的数据分类预测【23年新算法】 目录 分类预测 | Matlab实现DBO-SVM蜣螂算法优化支持向量机的数据分类预测【23年新算法】分类效果基本描述程序设计参考资料 分类效果 基本描述 1.HPO-GRU【23年新算法】基于猎食者优化算法优…...

【Pytorch】学习记录分享2——Tensor基础,数据类型,及其多种创建方式

pytorch 官方文档 Tensor基础,数据类型,及其多种创建方式 1. 创建 Creating Tensor: 标量、向量、矩阵、tensor2. 三种方法可以创建张量,一是通过列表(list),二是通过元组(tuple),三是通过Numpy的数组(arra…...

实验7:索引和视图定义

【实验目的】 1、了解索引和视图的含义 2、熟悉索引和视图的创建规则 3、掌握索引和视图的创建和管理 【实验设备及器材】 1、硬件:PC机; 2、软件:(1)Windows7; (2)Microsoft SQL Server 2012。 【主要内容】 索引的创建、删除、重建…...

Source Tree回滚 重置 贮藏操作

回滚提交 source tree的回滚提交: 在执行该操作时将会对history中提交的指定节点直接进行回滚,将该节点执行的提交操作撤销(如当前节点是提交文件,执行回滚提交时将会删除该文件,如果当前节点的前面的节点对该节点内容进行修改后,执行回滚提交时需要执行冲突解决),同时生成一次…...

Android13 不能静态注册的几个广播

Android13 不能静态注册的几个广播 文章目录 Android13 不能静态注册的几个广播一、不能静态注册的广播:二、静态注册无法生效的分析1、Intent.java2、其他地方声明了不能静态注册的广播3、为啥静态注册的广播无效?4、其他静态注册无法生效的广播5、其他Android fra…...

吴恩达深度学习L2W1作业1

初始化 欢迎来到“改善深度神经网络”的第一项作业。 训练神经网络需要指定权重的初始值,而一个好的初始化方法将有助于网络学习。 如果你完成了本系列的上一课程,则可能已经按照我们的说明完成了权重初始化。但是,如何为新的神经网络选择…...

uniapp原生插件之安卓app添加到其他应用打开原生插件

插件介绍 安卓app添加到其他应用打开原生插件,接收分享的文本和文件,支持获取和清空剪切板内容 插件地址 安卓app添加到其他应用打开原生插件,支持获取剪切板内容 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档 u…...

scala编码

1、Scala高级语言 Scala简介 Scala是一门类Java的多范式语言,它整合了面向对象编程和函数式编程的最佳特性。具体来讲Scala运行于Java虚拟机(JVM)之上,井且兼容现有的Java程序,同样具有跨平台、可移植性好、方便的垃圾回收等特性…...

智慧路灯杆如何实现雪天道路安全监测

随着北方区域连续发生暴雪、寒潮、大风等气象变化,北方多地产生暴雪和低温雨雪冰冻灾害风险,冬季雨雪天气深度影响人们出行生活,也持续增加道路交通风险。 智慧路灯杆是现代城市不可或缺的智能基础设施,凭借搭载智慧照明、环境监测…...

C语言指针基础题(二)

目录 例题一题目解析及答案 例题二题目解析及答案 例题三题目解析及答案 例题四题目解析及答案 例题五题目解析及答案 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 🐒🐒🐒 个人主页 🥸🥸&#x1f…...

物奇平台MIC配置与音频通路关系

物奇平台MIC配置与音频通路关系 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?可加我微信hezkz17, 本群提供音频技术答疑服务,群赠送语音信号处理降噪算法,蓝牙耳机音频,DSP音频项目核心开发资料, 1 255代表无效&am…...

外包干了3年,技术退步太明显了。。。。。

先说一下自己的情况,本科生生,18年通过校招进入武汉某软件公司,干了差不多3年的功能测试,今年国庆,感觉自己不能够在这样下去了,长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 ​ 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

面试高频问题

文章目录 &#x1f680; 消息队列核心技术揭秘&#xff1a;从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"&#xff1f;性能背后的秘密1.1 顺序写入与零拷贝&#xff1a;性能的双引擎1.2 分区并行&#xff1a;数据的"八车道高速公路"1.3 页缓存与批量处理…...