Reactjs 在react web应用程序中调用API的最佳方法是使用react fetch还是有其他最佳工具

大家好，我想通过API/服务器调用将数据检索到我的react web应用程序中。如何做到这一点。哪一个是进行API调用的最佳工具我应该使用AJAX还是react fetch

react中没有具体的方法，您可以自由选择

我会推荐，它工作得很好。因此，如果你熟悉ES6承诺等，那么就去做吧

---

其他选项是，

React只处理视图层，因此理想情况下，它不应该进行api调用。 连接其他模式，如flux或redux等，并查看其神奇之处

进行api调用还有两种其他方法：

• XMLHttpRequest
• 取回
• 超级药剂

我更喜欢抓取，因为它的设计更为合理

此外，您还可以查看下面的比较表了解更多选项：

更新日期：2月13日至17日： @下面是我的工作代码

dataAction.js

import * as types from '../constants/ActionTypes';

export function loadData(data) {
  return {type: types.LOAD_DATA, data};
}

export function getDataById(id) {
  return {type: types.GET_DATA_BY_ID, id};
}

export function loadCompleteData() {
  return function(dispatch, getState) {
    return fetch("localhost:9090/data/", {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then ((response) => {
            dispatch(loadProfiles(response));
          })
    .catch(error => console.log(error));
  }
}

import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function configureStore(initialState) {
    const store = createStoreWithMiddleware(rootReducer, initialState);
    return store;
}

配置store.js

import * as types from '../constants/ActionTypes';

export function loadData(data) {
  return {type: types.LOAD_DATA, data};
}

export function getDataById(id) {
  return {type: types.GET_DATA_BY_ID, id};
}

export function loadCompleteData() {
  return function(dispatch, getState) {
    return fetch("localhost:9090/data/", {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(response => response.json())
    .then ((response) => {
            dispatch(loadProfiles(response));
          })
    .catch(error => console.log(error));
  }
}

import {createStore, applyMiddleware} from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers/index';

const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);

export default function configureStore(initialState) {
    const store = createStoreWithMiddleware(rootReducer, initialState);
    return store;
}

---

是的，我正在使用REDUX+REACT，因为我可以使用fetch。？是的，你可以。在操作中，您可以进行提取调用。由于您使用的是redux，我建议您使用redux thunk。

函数loadData（data）{return{type:'LOAD_data'，data}；}函数loadCompleteData（）{return function（dispatch，getState）{return fetch（“localhost:9090/data/”，{method:'GET'，headers:{'Accept'：'application/json'，'Content Type'：'application/json'}）。然后（response=>response.json（））。然后（（response）=>{dispatch（loadProfiles（response））；}）。catch（error=>console.log（error））；}

你能告诉我如何使用npmNo安装fetch api吗？无需安装，它应该在窗口范围内，所以只需调用函数

fetch

。根据fetch文档：要发出请求并获取资源，请使用GlobalFetch.fetch方法。它在多个接口中实现，特别是在Window和WorkerGlobalScope中。这使它在您可能希望获取资源的几乎任何上下文中都可用