要如何抓取return出来的值?

Question

其实一直对return有点疑惑, 要如何取RETURN的值呢?

像是我现在这个vue项目

用fetch抓了unsplash的资料, 写在methods里, 想要@click時得到data

methods:{
      getImage(){
        fetch('https://picsum.photos/list',{
          method: 'GET'
        })
        .then(function(res){
          if(res.status >=200 && res.status <300){
          return res.json();
          }else{
            var error = new Error(res.statusText)
            error.res = res
            throw error
          }})
        .then(function(data){
          console.log('...Success:')
          console.log(data.slice(0,5))
          return data //<<<<<< 这里!
        })
        .catch(function(error){
          console.log('...Rejected:')
          console.log(error)
        });
    }
  }

就完全对return出来的值很疑惑, 想要去用这个值写在computed去v-for 渲染, 不知道要从何下手......
(有寫在created過, 但也是卡在不知return出來的值要如何抓取或使用)
但其实也不只是这个项目, 平常虽然知道要"如何"用return, 但自觉不清不楚, 想要问问各位大神return方面有没有什么知识点, 或给小弟一点详细的说明, 网上的纹档都看得差不多了做到想做的项目还是会卡卡的鸭...

向各位大神跪了...

Answer 1

methods:{
      getImage(){
        // 这里直接 return fetch方法
        return fetch('https://picsum.photos/list',{
          method: 'GET'
        })
        .then(function(res){
          if(res.status >=200 && res.status <300){
          return res.json();
          }else{
            var error = new Error(res.statusText)
            error.res = res
            throw error
          }})
      }
  }


// 调用 
this.getImage()
.then(function(data){
  console.log('...Success:')
  console.log(data.slice(0,5))
})
.catch(function(error){
  console.log('...Rejected:')
  console.log(error)
});

这样就拿到数据了，望采纳。

Answer 2

then 回调中直接 return 数据的话 then 会给你自动包装成 Promise 的(或者说叫 thenable，then 对 Promise 的判断是 duck-typing 的)。这样后面就可以继续 then 来获取数据。

你要用 data 的话就不需要 return 了，假设你在 vue data 里设置了 unsplashData，那么把 return data 换成 this.unsplashData = data 就可以，UI 直接响应 unsplashData 的值变化。

回调最好换成箭头函数以让 this 保持指向 vm，否则就用个变量装一下

data: {
  return {
    unsplashData: {}
  }
},
methods:{
      getImage(){
        var self = this
        fetch('https://picsum.photos/list',{
          method: 'GET'
        })
        .then(function(res){
          if(res.status >=200 && res.status <300){
          return res.json();
          }else{
            var error = new Error(res.statusText)
            error.res = res
            throw error
          }})
        .then(function(data){
          console.log('...Success:')
          console.log(data.slice(0,5))
          self.unsplashData = data
        })
        .catch(function(error){
          console.log('...Rejected:')
          console.log(error)
        });
    }
  }

资料的话看 MDN 应该足够了。再需要的话可以看 Promises/A+ spec.