南通网站设计制作公司,上海市网站,百度商家入驻,网站代运营要多少费用fetch.js 和 axios.js 都是 Vue 中比较常见的两种ajax框架
1. fetch.js
一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 fetch.js 就是眼下比较流行的一种 ajax 框架
1. 准备 json数据#xff1a;var url https://gitee.com/api/v5/users/liyangyfvar 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 srchttps://how2j.cn/study/axios.min.js/scriptdiv idhero/divscript
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; });/script2. 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请求并处理返回的数据。下面是对这段代码的详细解释
定义URL var url https://gitee.com/api/v5/users/liyangyf;发起GET请求 使用axios.get(url)发起一个GET请求到指定的URL。axios是一个流行的基于Promise的HTTP客户端用于浏览器和node.js。 .then(function(response) {…})是一个Promise的链式调用用于处理请求成功后的响应。当请求成功时该函数将被调用并且响应对象在这里是response将作为参数传递给它。
axios.get(url).then(function(response) { // 处理响应的代码
});处理响应数据 从response对象中提取data属性它通常包含从服务器返回的数据在这里是JSON格式的用户数据。 将这个数据存储在变量jsonObject中。虽然变量名是jsonObject但实际上它已经是JavaScript对象了而不是JSON字符串。
var jsonObject response.data; 将对象转换为JSON字符串 使用JSON.stringify(jsonObject)将JavaScript对象jsonObject转换为其JSON字符串表示形式。这通常用于调试或显示目的因为直接在HTML中显示JavaScript对象可能不会按预期工作。
var jsonString JSON.stringify(jsonObject);在HTML元素中显示数据 使用document.getElementById(“hero”)获取ID为hero的HTML元素可能是一个div、p或其他元素。然后使用.innerHTML属性将元素的HTML内容设置为包含JSON字符串的字符串。
document.getElementById(hero).innerHTML 通过 axios 获取到的json数据 jsonString;5. 使用 axios 获取 JSON 数据
script srchttps://how2j.cn/study/axios.min.js/scriptdiv idhero/divscript// 定义你要请求的 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); });
/script3. 总结
简单概括来说使用fetch或者axios可以分为三部分
发送请求显示数据处理错误
4. 在Vue里使用
4.1 在Vue里使用fetch.js
script srchttps://how2j.cn/study/vue.min.js/script
script srchttps://how2j.cn/study/fetch.min.js/scripthead/head
div iddiv1{{ info }}/table/divscript
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 srchttps://how2j.cn/study/vue.min.js/script
script srchttps://how2j.cn/study/axios.min.js/scriptdiv idapp{{ info }}/divscriptnew 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
