【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. 处理错误

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入 Django 模型层:数据库设计与 ORM 实践指南

title: 深入 Django 模型层&#xff1a;数据库设计与 ORM 实践指南 date: 2024/5/3 18:25:33 updated: 2024/5/3 18:25:33 categories: 后端开发 tags: Django ORM模型设计数据库关系性能优化数据安全查询操作模型继承 第一章&#xff1a;引言 Django是一个基于Python的开源…

Docker - 修改服务的端口

1. 测试 新建一个httpd服务 docker run -itd -p 1314:80 --name test -h test httpd 2. 先停止容器和 docke r服务 docker stop test #停止容器3. 修改配置 cd /var/lib/docker/containers ls 找到需要修改的 cd 1fc55f0d24014217cff68c9a417ca46cf50312caa5c9e6bb24085126…

【51蛋骗鸡595点阵88数码管流水灯综合应用】2021-12-30

缘由51单片机变量进阶与点阵LED-嵌入式-CSDN问答 大佬们 求解单片机点亮点阵程序 被困3天了一直想不明白 - 24小时必答区 #include<reg52.h>//头文件sbit shcpP1^2;//数据输入时钟线 595的11脚 sbit stcpP1^1;//输出存储器锁存时钟线 595的12脚 sbit dsP1^0;//数据线 5…

在2-3-4树上实现连接与分裂操作的算法与实现

在2-3-4树上实现连接与分裂操作的算法与实现 引言1. 维护2-3-4树结点的高度属性伪代码示例 2. 实现连接操作伪代码示例 3. 证明简单路径p的划分性质4. 实现分裂操作伪代码示例 C代码示例结论 引言 2-3-4树是一种平衡搜索树&#xff0c;它保证了树的高度被有效控制&#xff0c;…

242 基于matlab的3D路径规划

基于matlab的3D路径规划&#xff0c;蚁群算法&#xff08;ACO&#xff09;和天牛须&#xff08;BAS&#xff09;以及两种结合的三种优化方式&#xff0c;对3D路径规划的最短路径进行寻优。程序已调通&#xff0c;可直接运行。 242 3D路径规划 蚁群算法和天牛须 - 小红书 (xiaoh…

AI-数学-高中-51随机变量-条件概率与独立事件

原作者视频&#xff1a;【随机变量】【一数辞典】1条件概率与独立事件_哔哩哔哩_bilibili

自动驾驶-第02课软件环境基础(ROSCMake)

1. 什么是ros 2. 为什么使用ros 3. ROS通信 3.1 Catkin编译系统

“中国汉字”的英语表达|柯桥考级英语生活英语商务口语培训

汉字&#xff0c;又称中文字、中国字、方块字。汉字是表意文字&#xff0c;一个汉字通常表示汉语里的一个词或一个语素&#xff0c;这就形成了音、形、义统一的特点。 我们通常用“Chinese character”表示“汉字”而不用“Chinese word”. &#x1f534; 例句&#xff1a; C…

如何使用 GPT API 从 PDF 出版物导出研究图表?

原文地址&#xff1a;how-to-use-gpt-api-to-export-a-research-graph-from-pdf-publications 揭示内部结构——提取研究实体和关系 2024 年 2 月 6 日 介绍 研究图是研究对象的结构化表示&#xff0c;它捕获有关实体的信息以及研究人员、组织、出版物、资助和研究数据之间的关…

手撸Mybatis(三)——收敛SQL操作到SqlSession

本专栏的源码&#xff1a;https://gitee.com/dhi-chen-xiaoyang/yang-mybatis。 引言 在上一章中&#xff0c;我们实现了读取mapper配置并构造相关的mapper代理对象&#xff0c;读取mapper.xml文件中的sql信息等操作&#xff0c;现在&#xff0c;在上一章的基础上&#xff0c…

MLP手写数字识别(2)-模型构建、训练与识别(tensorflow)

查看tensorflow版本 import tensorflow as tfprint(Tensorflow Version:{}.format(tf.__version__)) print(tf.config.list_physical_devices())1.MNIST的数据集下载与预处理 import tensorflow as tf from keras.datasets import mnist from keras.utils import to_categori…

MLP实现fashion_mnist数据集分类(2)-函数式API构建模型(tensorflow)

使用函数式API构建模型&#xff0c;使得模型可以处理多输入多输出。 1、查看tensorflow版本 import tensorflow as tfprint(Tensorflow Version:{}.format(tf.__version__)) print(tf.config.list_physical_devices())2、fashion_mnist数据集分类模型 2.1 使用Sequential构建…

pygame鼠标绘制

pygame鼠标绘制 Pygame鼠标绘制效果代码 Pygame Pygame是一个开源的Python库&#xff0c;专为电子游戏开发而设计。它建立在SDL&#xff08;Simple DirectMedia Layer&#xff09;的基础上&#xff0c;允许开发者使用Python这种高级语言来实时开发电子游戏&#xff0c;而无需被…

自定义数据上的YOLOv9分割训练

原文地址&#xff1a;yolov9-segmentation-training-on-custom-data 2024 年 4 月 16 日 在飞速发展的计算机视觉领域&#xff0c;物体分割在从图像中提取有意义的信息方面起着举足轻重的作用。在众多分割算法中&#xff0c;YOLOv9 是一种稳健且适应性强的解决方案&#xff0…

环形链表 [两道题目](详解)

环形链表&#xff08;详解&#xff09; 第一题&#xff1a; 题目&#xff1a; 题目链接 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表…

使用protoc-jar-maven-plugin生成grpc项目

在《使用protobuf-maven-plugin生成grpc项目》中我们使用protobuf-maven-plugin完成了grpc代码的翻译。本文我们将只是替换pom.xml中的部分内容&#xff0c;使用protoc-jar-maven-plugin来完成相同的功能。总体来说protoc-jar-maven-plugin方案更加简便。 环境 见《使用proto…

【数据结构(邓俊辉)学习笔记】列表01——从向量到列表

文章目录 0.概述1. 从向量到列表1.1 从静态到动态1.2 从向量到列表1.3 从秩到位置1.4 列表 2. 接口2.1 列表节点2.1.1 ADT接口2.1.2 ListNode模板类 2.2 列表2.2.1 ADT接口2.2.2 List模板类 0.概述 学习了向量&#xff0c;再介绍下列表。先介绍下列表里的概念和语义&#xff0…

global IoT SIM解决方案

有任何关于GSMA\IOT\eSIM\RSP\业务应用场景相关的问题&#xff0c;欢迎W: xiangcunge59 一起讨论, 共同进步 (加的时候请注明: 来自CSDN-iot). Onomondo提供的全球IoT SIM卡解决方案具有以下特点和优势&#xff1a; 1. **单一全球配置文件**&#xff1a;Onomondo的SIM卡拥…

hive-row_number() 和 rank() 和 dense_rank()

row_number() 是无脑排序 rank() 是相同的值排名相同&#xff0c;相同值之后的排名会继续加&#xff0c;是我们正常认知的排名&#xff0c;比如学生成绩。 dense_rank()也是相同的值排名相同&#xff0c;接下来的排名不会加。不会占据排名的坑位。

C#知识|将选中的账号信息展示到控制台(小示例)

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 上篇学习了控件事件的统一关联&#xff0c; 本篇通过实例练习继续学习事件统一处理中Tag数据获取、对象的封装及泛型集合List的综合运用。 01 实现功能 在上篇的基础上实现&#xff0c;点击选中喜欢的账号&#xff0…