【how2j Vue部分】两种在Vue的Ajax框架——fetch axios

fetch.js 和 axios.js 都是 Vue 中比较常见的两种ajax框架

1. fetch.js

一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 fetch.js 就是眼下比较流行的一种 ajax 框架

1. 准备 json数据：var url = "https://gitee.com/api/v5/users/liyangyf"

2. 通过fetch获得数据 ：

fetch(url).then(function(response) {response.json().then(function (jsonObject) {var jsonString = JSON.stringify(jsonObject)document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;})
}).catch(function(err){console.log("Fetch错误:"+err);
})

3. 显示结果

在这里插入图片描述

4. 代码解释

这段代码是使用 JavaScript 的 fetch API 来从指定的 URL (http://how2j.cn/study/json.txt) 获取 JSON 数据，并在获取成功后将其显示在网页上的某个元素中。如果发生错误，它会在控制台中打印出错误信息。

下面是对这段代码的详细解释：

  1. 定义 URL：
    这里定义了一个变量 url，它包含了你想要从中获取数据的 URL。
var url = "http://how2j.cn/study/json.txt";

  1. 使用 fetch 获取数据：

    fetch` 是一个用于发起网络请求的 API。它返回一个 Promise，这个 Promise 在请求成功时解析为一个 Response 对象，在请求失败时则会被拒绝。

fetch(url).then(function(response) {  ...  
}).catch(function(err){  console.log("Fetch错误:"+err);  
});

then 方法用于处理 Promise 的成功情况。当请求成功时，它会执行你提供的函数，并传入一个 Response 对象。
catch 方法用于处理 Promise 的失败情况。当请求失败时，它会执行你提供的函数，并传入一个错误对象。

  1. 处理 Response 对象：
    Response对象有一个json方法，它返回一个 Promise，该 Promise 解析为请求的 JSON 响应。在这里，我们再次使用then` 方法来处理这个 Promise，并传入一个函数来处理解析后的 JSON 对象。
response.json().then(function (jsonObject) {  ...  
});

  1. 显示 JSON 数据：

    首先，我们使用 JSON.stringify 方法将 JSON 对象转换为字符串，这样我们就可以在 HTML 中显示它。然后，我们使用 document.getElementById 方法找到 ID 为 “hero” 的 HTML 元素，并将其 innerHTML 属性设置为包含 JSON 字符串的字符串。

var jsonString = JSON.stringify(jsonObject);  
document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;

总之，这段代码的主要目的是从指定的 URL 获取 JSON 数据，并将其显示在网页上的一个元素中。如果获取过程中发生错误，它会在控制台中打印出错误信息。

5. 使用 fetch 获取 JSON 数据

  • 定义你想要从中获取 JSON 数据的 URL。
  • 使用 fetch 函数发送 HTTP 请求到该 URL。
  • 使用 .then() 方法处理返回的 Promise，并获取 Response 对象。
  • 使用 Response 对象的 .json() 方法将响应体解析为 JSON 对象。
  • 在另一个 .then() 方法中处理解析后的 JSON 对象。
  • 使用 .catch() 方法捕获并处理任何可能出现的错误。

<script src="https://how2j.cn/study/axios.min.js"></script><div id="hero"></div><script>
var url = "https://gitee.com/api/v5/users/liyangyf"
// 使用 fetch 获取 JSON 数据  fetch(url)  .then(function(response) {  // 确保服务器响应的数据确实是 JSON 格式  if (!response.ok) {  throw new Error('Network response was not ok');  }  // 解析 JSON 数据  return response.json();  })  .then(function(jsonObject) {  // 在这里处理你的 JSON 数据  // 例如，将其显示在页面上  var jsonString = JSON.stringify(jsonObject); // 格式化 JSON 字符串以便阅读  document.getElementById("hero").innerHTML = "通过fetch获取到的json数据：<pre>" + jsonString + "</pre>";  })  .catch(function(error) {  // 在这里处理错误  console.error('There has been a problem with your fetch operation:', error);  // 可能的话，将错误信息显示给用户  document.getElementById("hero").innerHTML = "获取数据时出现错误：" + error.message;  });</script>

2. axios.js

本来要开始讲解 Vue.js 里如何使用 Ajax了。 一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 axios.js 就是眼下比较流行的一种 ajax 框架

1. 准备 json数据：var url = "https://gitee.com/api/v5/users/liyangyf"

2. 通过axios获得数据 ：

    axios.get(url).then(function(response) {var jsonObject = response.data;var jsonString = JSON.stringify(jsonObject)document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据："+ jsonString;})

3. 显示结果

在这里插入图片描述

4. 代码解释
这段代码是一个简单的JavaScript代码片段，它使用了axios库来从指定的URL（在这里是https://gitee.com/api/v5/users/liyangyf）发起一个GET请求，并处理返回的数据。下面是对这段代码的详细解释：

  1. 定义URL：
	var url = "https://gitee.com/api/v5/users/liyangyf";

  1. 发起GET请求：

    使用axios.get(url)发起一个GET请求到指定的URL。axios是一个流行的基于Promise的HTTP客户端，用于浏览器和node.js。

    .then(function(response) {…})是一个Promise的链式调用，用于处理请求成功后的响应。当请求成功时，该函数将被调用，并且响应对象（在这里是response）将作为参数传递给它。

axios.get(url).then(function(response) {  // 处理响应的代码  
});

  1. 处理响应数据：
    从response对象中提取data属性，它通常包含从服务器返回的数据（在这里是JSON格式的用户数据）。

    将这个数据存储在变量jsonObject中。虽然变量名是jsonObject，但实际上它已经是JavaScript对象了，而不是JSON字符串。

var jsonObject = response.data;

  1. 将对象转换为JSON字符串：

    使用JSON.stringify(jsonObject)将JavaScript对象jsonObject转换为其JSON字符串表示形式。这通常用于调试或显示目的，因为直接在HTML中显示JavaScript对象可能不会按预期工作。

var jsonString = JSON.stringify(jsonObject);
  1. 在HTML元素中显示数据：
    使用document.getElementById(“hero”)获取ID为hero的HTML元素（可能是一个<div>、<p>或其他元素）。然后，使用.innerHTML属性将元素的HTML内容设置为包含JSON字符串的字符串。
document.getElementById("hero").innerHTML = "通过 axios 获取到的json数据：" + jsonString;

5. 使用 axios 获取 JSON 数据

<script src="https://how2j.cn/study/axios.min.js"></script><div id="hero"></div><script>// 定义你要请求的 URL  const url = 'https://gitee.com/api/v5/users/liyangyf';  // 发起 GET 请求  axios.get(url)  .then((response) => {  // 处理成功响应  console.log('响应状态：', response.status);  console.log('响应数据：', response.data); // response.data 就是返回的 JSON 数据  // 在这里，你可以对返回的数据进行进一步的处理，比如保存到数据库或发送到其他服务  })  .catch((error) => {  // 处理错误  if (error.response) {  // 请求已发出，但服务器响应的状态码不在 2xx 范围内  console.error('服务器错误：', error.response.data);  console.error('状态码：', error.response.status);  } else if (error.request) {  // 请求已发出，但没有收到响应  console.error('请求错误：', error.request);  } else {  // 发送请求时发生了某些事情，导致请求没有发出  console.error('错误：', error.message);  }  console.error('配置：', error.config);  });
</script>

在这里插入图片描述

3. 总结

简单概括来说，使用fetch或者axios可以分为三部分：

  1. 发送请求
  2. 显示数据
  3. 处理错误

4. 在Vue里使用

4.1 在Vue里使用fetch.js

<script src="https://how2j.cn/study/vue.min.js"></script>
<script src="https://how2j.cn/study/fetch.min.js"></script><head></head>
<div id="div1">{{ info }}</table></div><script>
var url = "https://gitee.com/api/v5/users/liyangyf";
new Vue({el:'#div1',data () {return {info: null}},mounted(){ //mounted　表示这个 Vue 对象加载成功了fetch(url).then((response) => {// 取出响应中的json数据 *return response.json();}).then((data) => {// 设置响应数据this.items = JSON.stringify(data,null,"\t\t\t");// 控制台输出请求回来的json数据console.log(data)this.info = data}).catch(error => {    // 请求失败处理console.log(error);}).then(() => {this.loading = false;});}})</script>

在这里插入图片描述

4.2 在Vue里使用axios.js

<script src="https://how2j.cn/study/vue.min.js"></script>
<script src="https://how2j.cn/study/axios.min.js"></script><div id="app">{{ info }}</div><script>new Vue({el: '#app',data () {return {info: null}},mounted () {axios.get('https://gitee.com/api/v5/users/liyangyf').then(response => (this.info = response.data))}})</script>

在这里插入图片描述

参考资料：
使用 axios 访问 API

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

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

相关文章

STM32F407VET6 学习笔记1：GPIO引脚认识分类与开发板原理图

STM32F407VET6 学习笔记1：GPIO引脚认识分类与开发板原理图

今日学习STM32F407VET6 &#xff0c;首先从基本原理图、引脚方面开始做个初步理解并整理&#xff1a; 这里使用的学习开发板是在嘉立创购买的 立创梁山派天空星&#xff0c;芯片是 STM32F407VET6 主要对这个芯片的引脚做一些归纳认识、对开发学习板原理图设计进行认识理解:最…
阅读更多...
新的字符设备注册方式和自动创建节点

新的字符设备注册方式和自动创建节点

文章目录 前言一、设备号的申请1.自动申请设备号2.用户指定设备号 二、获取设备号的程序格式1.格式 三、字符设备注册1.新的字符设备注册方法 四、节点的自动创建1.mdev机制2.mdev机制实现流程①创建一个类②创建一个设备 五、总结流程六、文件私有数据 前言 &#x1f4a6; re…
阅读更多...
食品饮料-冲饮市场线上发展现状：香飘飘品牌监控数据分析

食品饮料-冲饮市场线上发展现状：香飘飘品牌监控数据分析

近期&#xff0c;老国货品牌香飘飘在国内备受关注&#xff0c;起因是某网友在日本华人超市内看到香飘飘Meco果汁茶产品包装统一增加了几组“海洋不是日本的下水道”、“请日本政客豪饮核污水”、“地球可以没有日本但不能没有海洋”等中日双语标语&#xff0c;正大光明讽刺日本…
阅读更多...
茶多酚复合纳米纤维膜

茶多酚复合纳米纤维膜

茶多酚复合纳米纤维膜是一种结合了茶多酚与纳米纤维技术的创新材料。茶多酚作为茶叶中多酚类物质的总称&#xff0c;具有抗氧化、抗辐射、抗*等多种药理作用&#xff0c;是一种非常有益的天然物质。而纳米纤维膜则因其超细纤维结构、高比表面积和高孔隙率等特性&#xff0c;在过…
阅读更多...
(五)JVM实战——JVM性能调优与监控

(五)JVM实战——JVM性能调优与监控

JVM调优案例的场景 为什么要调优&#xff1a;防止或者解决jvm虚拟机中的OOM问题&#xff1b;减少FullGC出现的频率&#xff0c;解决系统运行卡、慢问题JVM调优案例的四个方面 OOM(堆溢出)&#xff1a;java heap spaceOOM(元空间溢出)&#xff1a;MetaspaceOOM(GC overhead lim…
阅读更多...
腾讯技术面霸挑战赛开启！破解奇葩题赢10000元现金好礼

腾讯技术面霸挑战赛开启！破解奇葩题赢10000元现金好礼

金三银四&#xff0c;求职正当时&#xff0c;在互联网的技术面试中&#xff0c;对程序员的考察从技术知识到逻辑思维、行为测试&#xff0c;乃至难度颇高的智力题&#xff0c;考验临场反应的职场高情商“送命题”。让人大呼奇葩的技术面试题&#xff0c;你能破解几道&#xff1…
阅读更多...
区间预测——conformal tights

区间预测——conformal tights

conformal tights 是一个python包 特征&#xff1a; sklearn元估计器&#xff1a;向任何scikit-learn回归器添加分位数和区间的共形预测 darts预测&#xff1a;向任何scikit-learn回归器添加共形校准的概率预测 保形校准&#xff1a;准确的分位数和可靠的覆盖的区间 相干分…
阅读更多...
暗区突围服务器连接失败/网络异常/无法连接下载解决方法

暗区突围服务器连接失败/网络异常/无法连接下载解决方法

暗区突围是一款仿真战场的模拟&#xff0c;首要介绍的自然是游戏中基本都会参与的模式&#xff0c;叫做战术行动&#xff0c;大家参与其中是会作为特遣队员的身份来做任务&#xff0c;面临的是一个全面自给自足的战场环境&#xff0c;这种模式要求玩家在进入暗区之前自行筹备所…
阅读更多...
Linux下使用RAID

Linux下使用RAID

目录 1. 创建RAID准备 2. 创建RAID 0 2.1. 创建磁盘阵列 &#xff08;1&#xff09;创建磁盘阵列 &#xff08;2&#xff09;查看磁盘阵列信息 &#xff08;3&#xff09;挂载文件系统 &#xff08;4&#xff09;保存RAID信息 &#xff08;5&#xff09;开机自动挂载RA…
阅读更多...
阿里云国际服(alibabacloud)介绍、注册、购买教程？

阿里云国际服(alibabacloud)介绍、注册、购买教程？

一、什么是阿里云国际版&#xff1f; 阿里云分为国内版和国际版。国内版仅面向中国大陆客户&#xff0c;国际版面向全球客户。 二、国际版与国内版有何异同&#xff1f; 1&#xff09;异&#xff1a;除了目标客户不同&#xff0c;运营主体不同&#xff0c;所需遵守的法律与政…
阅读更多...
【吃透Java手写】Spring(下)-AOP-事务及传播原理

【吃透Java手写】Spring(下)-AOP-事务及传播原理

【吃透Java手写】Spring&#xff08;下&#xff09;AOP-事务及传播原理 6 AOP模拟实现6.1 AOP工作流程6.2 定义dao接口与实现类6.3 初始化后逻辑6.4 原生Spring的方法6.4.1 实现类6.4.2 定义通知类&#xff0c;定义切入点表达式、配置切面6.4.3 在配置类中进行Spring注解包扫描…
阅读更多...
Java多线程编程之synchronizaed和锁分类

Java多线程编程之synchronizaed和锁分类

并发编程第三周 1 锁的分类 1.1 可重入锁&#xff0c;不可重入锁 Java提供的synchronized&#xff0c;ReentrantLock,ReentrantReadWriteLock都是可重入锁 可重入&#xff1a;当前线程获取到A锁&#xff0c;在获取之后尝试再次获取A锁是可以直接拿到的。 不可重入:当前线程…
阅读更多...
美业SaaS系统多门店收银系统源码-【分润常见问题】讲解（二）

美业SaaS系统多门店收银系统源码-【分润常见问题】讲解（二）

美业管理系统源码 博弈美业SaaS系统 连锁多门店美业收银系统源码 多门店管理 / 会员管理 / 预约管理 / 排班管理 / 商品管理 / 促销活动 PC管理后台、手机APP、iPad APP、微信小程序 ▶ 分润常见问题&#xff1a; 4、若产品的服务方分润>0&#xff0c;则销售方分润和服…
阅读更多...
Unity Shader中获取像素点深度信息

Unity Shader中获取像素点深度信息

1.顶点着色器中对深度进行计算 v2f vert(appdata v) {v2f o;o.pos UnityObjectToClipPos(v.vertex);o.uv TRANSFORM_TEX(v.uv, _MainTex);o.depth (o.pos.z / o.pos.w 1.0) * 0.5; // Normalize depth to [0, 1]return o; }但是达不到预期&#xff0c;最后返回的值一直大于…
阅读更多...
2024智能电网与能源系统国际学术会议（ICSGES2024)

2024智能电网与能源系统国际学术会议（ICSGES2024)

2024智能电网与能源系统国际学术会议&#xff08;ICSGES2024) 会议简介 我们诚挚邀请您参加将在南京隆重举行的2024年智能电网与能源系统国际学术会议&#xff08;ICSGES2024&#xff09;。南京&#xff0c;一座历史与现代交织的城市&#xff0c;将为这场盛会提供独特的学术…
阅读更多...
力扣刷题--数组--第一天

力扣刷题--数组--第一天

一、数组 数组特点&#xff1a; 连续内存空间存储得数据元素类型一致数组可以通过下标索引查找数据元素&#xff0c;可以删除、替换、添加元素等 1.1 二分查找 使用二分查找需满足得条件&#xff1a; 数组是有序的&#xff1b;数组中没有重复元素&#xff1b;查找的target…
阅读更多...
论文辅助笔记：TimeLLM

论文辅助笔记：TimeLLM

1 __init__ 2 forward 3 FlattenHead 4 ReprogrammingLayer
阅读更多...
暗区突围进不去/游戏无法启动/掉帧卡顿/报错的解决方法

暗区突围进不去/游戏无法启动/掉帧卡顿/报错的解决方法

暗区突围是一款高拟真硬核射击手游&#xff0c;打造了全新的沉浸式暗区战局体验&#xff0c;发行商是腾讯公司。这个游戏名词虽然看起来有些陌生&#xff0c;但其本身的玩法内核毫无疑问的是&#xff0c;这款游戏在画面质量和枪械操作方面&#xff0c;都是手游市场上同类游戏中…
阅读更多...
springboot模块以及非springboot模块构成的多模块maven项目最佳构建方式

springboot模块以及非springboot模块构成的多模块maven项目最佳构建方式

文章目录 背景一般的实现使用spring-boot-dependencies 更优雅的实现. 背景 有时候构建一个多模块maven项目其中某一个模块是web-service需要使用spring boot,其他模块跟spring boot 完全无关,本文总结一下在这个场景下maven项目最佳构建方式. 一般的实现 网上应该也看到过很…
阅读更多...
我独自升级崛起下载教程 我独自升级崛起怎么一键下载

我独自升级崛起下载教程 我独自升级崛起怎么一键下载

定于5月8日全球盛大发布的动作RPG力作《我独自升级崛起》&#xff0c;基于备受追捧的同名动画及网络漫画&#xff0c;誓为热情洋溢的游戏爱好者们呈献一场深度与广度兼具的冒险盛宴。这款游戏巧妙融合网络武侠元素&#xff0c;其创意十足的设计框架下&#xff0c;核心叙述聚焦于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023