使用vuejs和fetch()在promise调用中显示数据

我对fetch函数有些困惑,这是我的代码:

<template>
  <!-- above the fold -->
  <section class="uk-section uk-section-primary">
    <div class="uk-container">
      {{ items }}
    </div>
  </section>
  <!-- end above the fold -->
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',

  data() {
    return {
        items: {}
    }
  },

  mounted() {
    this.getInfo()
  },

  methods: {
    getInfo() {
      fetch('mydomain.net/cockpit/api/singletons/get/frontpage' , {
        headers: { 'Authorization': 'Bearer xxmySecretxx' }
      })
        .then(res => this.items = res.json())
        .then(res => console.log(res));
    }
  },

}
</script>

In console.log I can view the items value, but on the browser the result is [object Promise] how fetch() works?

评论
tut
tut

res.json()是一个异步函数,例如fetch;这就是为什么要添加第二个“ then”的原因。如果您按如下方式编辑代码,则将获得所需的内容:

    getInfo() {
      fetch('mydomain.net/cockpit/api/singletons/get/frontpage' , {
        headers: { 'Authorization': 'Bearer xxmySecretxx' }
      })
        .then(res => res.json())
        .then(res => this.items = res);
    }
点赞
评论
det
det

以一种非常简单的方式,您真正要做的就是使用所需的URL调用fetch,默认情况下,Fetch API使用GET方法,因此,一个非常简单的调用将像这样:

fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
    // Your code for handling the data you get from the API
})
.catch(function() {
    // This is where you run code if the server returns any errors
});

fetch()方法是现代且通用的。旧浏览器不支持该功能,但现代浏览器对此功能非常支持。

基本语法为:

let promise = fetch(url, [options])
url –要访问的URL。      options –可选参数:方法,标题等

没有选项,这是一个简单的GET请求,下载URL的内容。

浏览器立即启动请求,并返回一个承诺,调用代码应使用该承诺来获取结果。

如果提取无法进行HTTP请求,则Promise会拒绝,例如网络问题,或者没有这样的网站。异常的HTTP状态(例如404或500)不会导致错误。

我们可以在响应属性中看到HTTP状态:

status – HTTP状态代码,例如200 ok –布尔值,如果HTTP状态代码为200-299,则为true。

点赞
评论