VUE- 访问服务器端数据 Vue-resource

VUE- 访问服务器端数据 Vue-resource

1. 安装 vue-resource

cnpm install vue-resource --save

安装完毕后，在main.js中导入，如下所示：

import VueResource from 'vue-resource'; 

Vue.use(VueResource);  

get请求

var params = {params: {id: id}}
this.$http.get(url, params).then(function(res){
    // 响应成功回调
    var data = res.body;
    //数据在res.body里面
}, function(res){
    // 响应错误回调
});

//或

 　 this.$http.get(url, params)

        .then(
          response => {
            dataRes = response.data;
          },
          response => {} // 发生错误
        );

post请求

 

启用{emulateJSON : true}选项后，请求会以application/x-www-form-urlencoded作为content-type,像HTML表单一样。

this.$http.post(this.$config.PathHttpAuth + "/api/menu/DeleteMenu", {id: },{emulateJSON : true}) 
.then( 
function(res) { }, 
response => {} // 发生错误  
); 

[Route("DeleteMenu")] 
[HttpPost] 
public async Task<IActionResult> DeleteMenuAsync(dynamic param) {}

或

[Route("SaveMenu")]
[HttpPost]
public async Task<IActionResult> SaveMenuAsync(Tbmenu modelForm)
{}

JSONP 请求

var JSONparams ={
    params: {id: id}
    jsonp: 'callback' // 设置回调函数的参数的一个名字，默认是话是callback,
}
 this.$http.jsonp(url, JSONparams).then( (res) => {
    console.log(res);
}, (err) => {
    console.log(err);
}) 

引用：https://blog.csdn.net/ant_dreams/article/details/80568420