【how2j Vue部分】两种在Vue的Ajax框架——fetch & axios-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 数据，并在获取成功后将其显示在网页上的某个元素中。如果发生错误，它会在控制台中打印出错误信息。

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

定义 URL：
这里定义了一个变量 url，它包含了你想要从中获取数据的 URL。

var url = "http://how2j.cn/study/json.txt";

使用 fetch 获取数据：

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

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

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

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

response.json().then(function (jsonObject) {  
    ...  
});

显示 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>

秒客网

【how2j Vue部分】两种在Vue的Ajax框架——fetch & axios-1. fetch.js

相关文章