javascript获取空数据

Question

我有问题。为什么不获取返回数据？ 当我在邮递员中尝试此请求时，此请求将返回数据。

邮递员屏幕截图：

Chrome DevTools返回屏幕截图：

javascript代码：

function getAllRestaurant() {
  const requestOptions = {
    method: 'GET',
    headers: { ...authHeader(), 'Content-Type': 'application/json', 'Accept': 'application/json' },
  };

  fetch(store.state.apiUrl + 'restaurant', requestOptions)
      .then(data => console.log('Data from server: ', data))
      .catch(error => console.log('error: ', error));
}

Answer 1

data是Response对象。要查看实际的JSON数据，您需要调用其json()方法，该方法将返回另一个promise。

function getAllRestaurant() {
  const requestOptions = {
    method: 'GET',
    headers: { ...authHeader(),
      'Accept': 'application/json'
    },
  };

  fetch(store.state.apiUrl + 'restaurant', requestOptions)
    .then(response => response.json().then(data => console.log(data)))
    .catch(error => console.log('error: ', error));
}

Answer 2

谢谢，我要替换

在我的vuex模块中

getAllRestaurant({ commit }) {
    commit('getAllRestaurantRequest');

    restaurantService.getAllRestaurant()
        .then(
            restaurant => commit('getAllRestaurantSuccess', restaurant),
            error => commit('getAllRestaurantFailure', error)
        );
  },

收件人：

  getAllRestaurant({ commit }) {
    commit('getAllRestaurantRequest');

    restaurantService.getAllRestaurant()
        .then(response => response.json().then(data => commit('getAllRestaurantSuccess', data)))
        .catch(error => commit('getAllRestaurantFailure', error));
  },

工作顺利。感谢您的帮助

Answer 3

这是因为缺少指定的内容类型。这里需要使用 json() 方法将请求类型转换为 json 形式。

只需添加内容类型转换即可解决此问题。

更改以下代码

function getAllRestaurant() {
  const requestOptions = {
    method: 'GET',
    headers: { ...authHeader(), 'Content-Type': 'application/json', 'Accept': 'application/json' },
  };

  fetch(store.state.apiUrl + 'restaurant', requestOptions)
      .then(data => console.log('Data from server: ', data))
      .catch(error => console.log('error: ', error));
}

到

function getAllRestaurant() {
  const requestOptions = {
    method: 'GET',
    headers: { ...authHeader(), 'Content-Type': 'application/json', 'Accept': 'application/json' },
  };

  fetch(store.state.apiUrl + 'restaurant', requestOptions)
      .then(res => res.json())
      .then(data => console.log('Data from server: ', data))
      .catch(error => console.log('error: ', error));
}

添加 .then(res => res.json()) 将解决此问题。