vue.js resource 请求后台得到json要怎么解析出来

Posted 2023-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js resource 请求后台得到json要怎么解析出来相关的知识，希望对你有一定的参考价值。

this.$http.get(this.apiUrl)
           .then((response) =>
               // 这个就是后台给你返回的json
               // 例如格式为 data:1
               console.log(response.data);
               // 就会输出1 这样就解析出来了
           )
           .catch(function(response)
             console.log(response)
           )

参考技术A 出来是空白的没有渲染到数据进去，json数据在上面放出来了！因为我的json数据缺少，但是我在后台的字符串中加上还是渲染不了

Vue.js的AJAX

[

Vue.js中，Vue 要实现异步加载需要使用到 vue-resource 库, 如下：

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

我们可以通过Vue.js的AJAX的get和post请求来了解。

Vue.js的AJAX的get请求

以下是一个简单的 Get 请求实例，请求地址是一个简单的 txt 文本：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - Break易站(breakyizhan.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> </head> <body> <div id="box"> <input type="button" @click="get()" value="点我异步获取数据(Get)"> </div> <script type = "text/javascript"> window.onload = function(){ var vm = new Vue({ el:‘#box‘, data:{ msg:‘Hello World!‘, }, methods:{ get:function(){ //发送get请求 //获取https://www.breakyizhan.com/robots.txt this.$http.get(‘https://cdn.breakyizhan.com/robots.txt‘).then(function(res){ document.write(res.body); },function(){ console.log(‘请求失败处理‘); }); } } }); } </script> </body> </html>

?????提示：可以修改代码后运行

Vue.js的AJAX的post请求

post 发送数据到后端，需要第三个参数?{emulateJSON:true}。

emulateJSON 的作用：如果Web服务器无法处理编码为 application/json 的请求，你可以启用 emulateJSON 选项。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - Break易站(breakyizhan.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> </head> <body> <div id="box"> <input type="button" @click="post()" value="点我异步获取数据(Post)"> </div> <script type = "text/javascript"> window.onload = function(){ var vm = new Vue({ el:‘#box‘, data:{ msg:‘Hello World!‘, }, methods:{ post:function(){ //发送 post 请求 this.$http.post(‘/tools/code/vue/ajax_post.php‘,{name:"Break易站",url:"https://www.breakyizhan.com"},{emulateJSON:true}).then(function(res){ document.write(res.body); },function(res){ console.log(res.status); }); } } }); } </script> </body> </html>

?????提示：可以修改代码后运行

Vue.js的AJAX的语法&API

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

// 基于全局Vue对象使用http
Vue.http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback);
Vue.http.post(‘/someUrl‘, [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get(‘/someUrl‘, [options]).then(successCallback, errorCallback);
this.$http.post(‘/someUrl‘, [body], [options]).then(successCallback, errorCallback);

vue-resource 提供了 7 种请求 API(REST 风格)：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

除了 jsonp 以外，另外 6 种的 API 名称是标准的 HTTP 方法。

options 参数说明:

参数	类型	描述
url	`string`	请求的目标URL
body	`Object`,?`FormData`,?`string`	作为请求体发送的数据
headers	`Object`	作为请求头部发送的头部对象
params	`Object`	作为URL参数的参数对象
method	`string`	HTTP方法 (例如GET，POST，...)
timeout	`number`	请求超时（单位：毫秒） (`0`表示永不超时)
before	`function(request)`	在请求发送之前修改请求的回调函数
progress	`function(event)`	用于处理上传进度的回调函数 ProgressEvent
credentials	`boolean`	是否需要出示用于跨站点请求的凭据
emulateHTTP	`boolean`	是否需要通过设置`X-HTTP-Method-Override`头部并且以传统POST方式发送PUT，PATCH和DELETE请求。
emulateJSON	`boolean`	设置请求体的类型为`application/x-www-form-urlencoded`

通过如下属性和方法处理一个请求获取到的响应对象：

属性	类型	描述
url	`string`	响应的URL源
body	`Object`,?`Blob`,?`string`	响应体数据
headers	`Header`	请求头部对象
ok	`boolean`	当HTTP响应码为200到299之间的数值时该值为true
status	`number`	HTTP响应吗
statusText	`string`	HTTP响应状态
方法	类型	描述
text()	`约定值`	以字符串方式返回响应体
json()	`约定值`	以格式化后的json对象方式返回响应体
blob()	`约定值`	以二进制Blob对象方式返回响应体

]

??本文标题：Vue.js的AJAX - Break易站

转载请保留页面地址：https://www.breakyizhan.com/vue/6711.html

以上是关于vue.js resource 请求后台得到json要怎么解析出来的主要内容，如果未能解决你的问题，请参考以下文章

axios请求和vue-resource

Vue.js的AJAX

vue.js 的插件 vue-resource

Vue.js——vue-resource全攻略

vue系列之vue-resource

Vue.js——vue-resource全攻略