Axios不会捕获数据并将其发送到客户端

Question

我在Express中构建了一个后端，以获取Instagram提要图像，然后将图像URL发送到使用ReactJs构建的前端。 如果我使用instagram-node来获取图像URL，然后将其发送到前端，则一切正常，但是如果我使用axios手动进行操作，则它将无法工作。

这是我的带有instagram-node npm数据包的代码：

ig.user_media_recent('user_id', function(err, medias, pagination, remaining, limit) {
    if(err) console.log(err);
    else{
      var inst = [];
      medias.map(function(content){ inst.push(content.images.thumbnail.url)});
      res.send(inst);
    }
  });

如果我执行上述操作，则后端将获取该URL，然后将其发送至我的前端，但是如果我像下面那样使用axios

axios.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=token')
       .then(function(res){
         console.log(res.data.data[0].images.standard_resolution.url);
         res.send(res.data.data[0].images.standard_resolution.url);
       }).catch(function (err){
         res.send(err.body);
       })

那么它不会发送任何东西。 console.log仍然会打印出正确的URL，但是res.send不会执行任何操作。 当我进入后端本地主机时，它甚至不会显示URL。 知道为什么吗？

Answer 1

似乎res.send(res.data.data[0].images.standard_resolution.url)在这里有问题。 这就是我们通常在反应中做这些事情的方式。 完成承诺后，您需要使用响应有效负载触发操作，然后化简器将返回新状态。 最后，UI将使用更新的数据重新呈现。 这就是反应的方式。

axios.get('https://api.instagram.com/v1/users/self/media/recent/?access_token=token')
       .then(function(res){
         console.log(res.data.data[0].images.standard_resolution.url);
         return { 
            type: GET_INSTA_FEEDS, 
            payload: response.data 
        }
       }).catch(function (err){
         res.send(err.body);
       })

然后编写一个化reducer以获取此数据并正确返回新状态。

// ------------------------------------
// Reducer
// ------------------------------------
export const initialState = {
    instaFeeds: []
}

[GET_INSTA_FEEDS]: (state, action) => {
    return { ...state, instaFeeds: action.payload }
}

通过连接HOC将该状态绑定到您的组件。 而已