本文共 2496 字，大约阅读时间需要 8 分钟。

参考文章：

百度了一下，现在好像更推荐使用axios，当然vue-resource和axios都要简单了解一下。

vue-resource

首先要引入对应的js文件，可以使用在线的

语法

你可以使用全局对象方式 Vue.http 或者在一个 Vue 实例的内部使用 this.$http来发起 HTTP 请求

// 基于全局Vue对象使用httpVue.http.get('/someUrl', [options]).then(successCallback, errorCallback);Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);// 在一个Vue实例内使用$httpthis.$http.get('/someUrl', [options]).then(successCallback, errorCallback);this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

get请求实例： 请求一个简单的 txt 文本：

   
	
    查看test.txt文本内容
   

注：如果需要传递数据，可以使用 this.$http.get(‘get.php’,{params : jsonData}) 格式，第二个参数 jsonData 就是传到后端的数据。

post 请求

window.onload = function(){       var vm = new Vue({           el:'#box',        data:{               msg:'Hello World!',        },        methods:{               showMessage:function(){                   //发送 post 请求                this.$http.post('/try/ajax/demo_test_post.php',{   name:"菜鸟教程",url:"http://www.runoob.com"},{   emulateJSON:true}).then(function(res){                       document.write(res.body);                    },function(res){                       console.log(res.status);                });            }        }    });}

response对象

常用属性与方法：

url： 返回获取请求的url地址body：	返回响应体数据（请求返回的数据）headers：返回请求头对象ok：	响应码为 200 到 299 之间的数值时该值为 truestatus： 返回HTTP 响应码statusText：返回HTTP 响应状态text()	以字符串方式返回响应体json()	以格式化后的 json 对象方式返回响应体blob()	以二进制 Blob 对象方式返回响应体（图像，音频之类的文件）

axios

首先要引入对应的js文件，可以使用在线的，当然也可以下载

GET请求

实例1：简单的读取 JSON 数据，使用 response.data 读取 JSON 数据

json

   
	
    查看test.txt文本内容
   

内容可以打印到控制台，但是不能显示到页面，不知道是什么问题

实例：get方法传递参数

1、直接在 URL 上添加参数

// 直接在 URL 上添加参数 ID=12345axios.get('/user?ID=12345')  .then(function (response) {       console.log(response);  })  .catch(function (error) {       console.log(error);  }); // 也可以通过 params 设置参数：axios.get('/user', {       params: {         ID: 12345    }  })  .then(function (response) {       console.log(response);  })  .catch(function (error) {       console.log(error);  });

POST传递参数

axios.post('/user', {       firstName: 'Fred',        // 参数 firstName    lastName: 'Flintstone'    // 参数 lastName  })  .then(function (response) {       console.log(response);  })  .catch(function (error) {       console.log(error);  });