Axios 响应数据替换

Question

我正在尝试通过使用 Twitch API 来学习 Axios 和 Vue。我正在从 API 中获取数据，并且有 thumbnail_url 用于频道的缩略图，但我必须更改该数据的 width 和高度因为它是这样的;

https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg

而我正试图这样做；

beforeMount(){
  helix.get('streams?language=en').then((response) => {
    for(var i=0; i < response.data.data.length; i++){
      response.data.data[i].thumbnail_url.replace("width", "40")
    }
    console.log(response.data.data)
  this.results = response.data.data
    })
    .catch(function (error) {
     console.log(error);
     });
},

实际上，我不明白那是什么不起作用。我知道有一点我错过了。如果有人可以帮助我，那就太好了。如果这不是正确的方法，那么正确的方法是什么？非常感谢。

Answer 1

您应该改用 replace("{width}", "40");

var url = 'https://static-cdn.jtvnw.net/previews-ttv/live_user_shroud-{width}x{height}.jpg';
url = url.replace("{width}", "40");
url = url.replace("{height}", "60");
console.log(url);

在你的代码中改变这个

var thumbnail_url = response.data.data[i].thumbnail_url;
thumbnail_url = thumbnail_url.replace("{width}", "40");
thumbnail_url = thumbnail_url.replace("{height}", "60");
response.data.data[i].thumbnail_url = thumbnail_url;

正如你评论的那样，你也可以在没有变量的情况下做到这一点

response.data.data[i].thumbnail_url = response.data.data[i].thumbnail_url.replace("{width}", "40").replace("{height}", "60");

Axios 响应数据替换

Axios Response Data Replace

twitch

vue.js

axios

twitch-api