Vue.js系列教材（十五）- VUE.JS 配合 fetch.js 或者 axios.js 进行 ajax 访问

Vue.js系列教材（十四）- AXIOS.js 教程实例

Vue.js系列教材（十六）- vue-cli 3 教程

工具版本兼容问题

步骤 1 : Ajax
步骤 2 : 首先准备 json 数组
步骤 3 : fetch.js 方式
步骤 4 : axios.js 方式

步骤 1 :

Ajax

edit 顶折

纠问

Vue.js 并没有限制使用哪种方式进行 ajax 访问，所以可以使用如下方式
1. 原生 ajax
2. JQuery
3. vue-resource
4. fetch.js
5. axios.js

那么到底用哪种方式呢？

1. 原生一般不在项目中直接用
2. jquery 不如4，5方便
3. vue-resource 已经不再维护了，所以不推荐
4. fetch.js 是 vue.js 官方推荐
5. axios.js 是vue.js 官方推荐

步骤 2 :

首先准备 json 数组

edit 顶折

纠问

json 数据很简单，然后我把它放在：http://how2j.cn/study/jsons.txt 方便调用

[
	{"name":"gareen","hp":"355"},
	{"name":"teemo","hp":"287"},
	{"name":"annie","hp":"420"}
]

步骤 3 :

fetch.js 方式

edit 顶折

纠问

fetch 的调用就是前面 fetch 教程里讲解的。
新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。

mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
<script src="https://how2j.cn/study/fetch.min.js"></script>
 
<head>
<style>
table tr td{
    border:1px solid gray;
}
table{
    border-collapse:collapse;
    width:300px;
}
tr.firstLine{
    background-color: lightGray;
}
</style>

</head>
<div id="div1">
   
    <table align="center" >
        <tr class="firstLine">
            <td>name</td>
            <td>hp</td>
        </tr>
         
        <tr v-for="hero in heros">
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>
         
    </table>
 
</div>
 
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
	el:'#div1',
	data:{
		heros:[]
	},
	mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
		self=this
		fetch(url).then(function(response) {
		    response.json().then(function (jsonObject) {
		    	self.heros = jsonObject
		    })
		}).catch(function(err){
		    console.log("Fetch错误:"+err);
		})
	}
})
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

axios.js 方式

edit 顶折

纠问

axios 的调用就是前面 axios 教程里讲解的。
新的知识点是在 mounted 的时候进行。 mounted 表示 Vue 对象加载成功了。

mounted:function(){ //mounted　表示这个 Vue 对象加载成功了

运行效果

代码行数较多，请点击查看

<script src="https://how2j.cn/study/vue.min.js"></script>
<script src="https://how2j.cn/study/axios.min.js"></script>
 
<head>
<style>
table tr td{
    border:1px solid gray;
}
table{
    border-collapse:collapse;
    width:300px;
}
tr.firstLine{
    background-color: lightGray;
}
</style>

</head>
<div id="div1">
   
    <table align="center" >
        <tr class="firstLine">
            <td>name</td>
            <td>hp</td>
        </tr>
         
        <tr v-for="hero in heros">
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>
         
    </table>
 
</div>
 
<script>
var url = "http://how2j.cn/study/jsons.txt";
new Vue({
	el:'#div1',
	data:{
		heros:[]
	},
	mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
		var self = this
		axios.get(url).then(function(response) {
			self.heros= response.data; //此时还是字符串
			self.heros = eval("("+self.heros+")");  //字符串转换为数组对象
		})		
	}
})
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

Vue.js系列教材（十四）- AXIOS.js 教程实例

Vue.js系列教材（十六）- vue-cli 3 教程

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2024-07-30 this 关键字作用域问题以及 response.data 对象问题

虚心求学

关于前端部分-Vue.js-Ajax 的提问

mounted 钩子函数是 Vue 实例生命周期中的一个方法，但在 Axios 的回调函数中，this 指向的不是 Vue 实例，而是当前回调函数的上下文对象。所以： mounted:function(){ var url = "https://static.how2j.cn/study/jsons.txt"; var self = this;//此处指的是 vue 实例 axios.get(url).then(function(response){ this.heros;//此处拿不到 heros，因为这里的this 是 axios 的回调函数的上下文对象。 self.heros = response.data; //此处不需要使用 eval 转换，因为response本身就返回一个对象 console.log(typeof response.data); // 打印结果为：Object }) }

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2023-12-14 步骤 4 : axios.js 方式中的 response.data 并不是字符串

Shu_Enryu

关于前端部分-Vue.js-Ajax 的提问

如题，站长在注释里写的，“现在还是字符串”。但自己看了以下，类型并不是string，而是object。而且将response.data直接赋值给self.heroes可以照常运行。并不需要将它用eval解析。

<style>
    table{
        border-collapse: collapse;
    }
    td{
        border: 1px solid black;
        width: 100px;
    }
    tr:first-child{
        background-color: lightgray;
    }
</style>
<html>
    <head>
        <script src="vue.min.js"></script>
        <script src="axios.min.js"></script>
    </head>
    <body>
        <table id="t">
            <tr>
                <td>name: </td>
                <td>hp: </td>
            </tr>
            <tr v-for="hero in heroes">
                <td>{{hero.name}}</td>
                <td>{{hero.hp}}</td>
            </tr>
        </table>

    </body>
</html>
<script>
    var url = "jsons.txt"
    new Vue({
        el: "#t"
        , data: {
            heroes: []
        }
        , mounted: function(){
            var self = this;
            axios.get(url).then(function(response){
                 
                self.heroes = response.data;
                console.log(typeof(response.data));
            });
        }
    });
</script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-11-23 原因：CORS 请求未能成功

2021-04-23 复制过去eclipse运行不了

2020-03-21 不知怎地未能成功运行加载结果

加油啊蓁蓁

关于前端部分-Vue.js-Ajax 的提问

3 个答案

松松仔
答案时间：2021-06-24

那个放到项目里的相对路径应该怎么写，是./jsons.txt吗？为什么还是不行

鸡你太美噢北北
答案时间：2020-09-07

url改成如下，或者把json文件放到项目中，url用相对路径访问

var url = "https://static.how2j.cn/study/jsons.txt";

浩子♍
答案时间：2020-04-09

url里的http改成https

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 7 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-Vue.js-Ajax 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图