如何通过Fetch保证HTTP请求的成功

我正在试图了解处理

获取

HTTP请求的正确方法，并确保收到请求的数据

我的观点是，我的请求可能会出错，并且所需的数据对我的应用程序至关重要。在这种情况下，什么是更合适的处理方式？简单地创建一个新请求

我如何将解决方案与

redux

和

redux-thunk

相结合

---

感谢一本编写Redux Thunk操作创建者的指南，该创建者使用fetch执行HTTP请求

序言

本例使用同构fetch，这是一个用于发出HTTP请求的基于承诺的库。但是，您可以使用不同的基于承诺的请求库（如Axios）运行此示例，它仍然可以工作。如果您不想使用这些库中的任何一个，您可以将自己的HTTP请求封装在承诺中

快速重排Thunk示例

首先，这里是一个从redux thunk文档中借用的自包含示例

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

// set up store with redux thunk
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

// thunk action creator
function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

// we can now dispatch the result of our thunk action creator like any other action
store.dispatch(makeASandwichWithSecretSauce('bob))

用Redux操作表示HTTP请求的状态性

从Redux文档：

在调用异步API时，有两个关键时刻 时间：你开始打电话的那一刻，以及你接到电话的那一刻 回答（或超时）。我们首先需要定义行动及其影响 与对 任何给定主题id的外部资源

const fetchPending = (topicId) => {
  return { type: 'FETCH_PENDING', topicId }
}

const fetchFulfilled = (topicId, response) => { 
  return { type: 'FETCH_FULFILLED', topicId, response }
}

const fetchRejected = (topicId, err) => {
  return { type: 'FETCH_REJECTED', topicId, err }
}

表示API请求的承诺有三种可能的状态：

• 待决（提出请求）
• 已完成（请求成功）
• 拒绝（请求失败或超时）

代表请求状态承诺的核心行动创造者

好的，让我们来编写核心动作创建者，我们将需要为给定的主题id表示请求的状态

const fetchPending = (topicId) => {
  return { type: 'FETCH_PENDING', topicId }
}

const fetchFulfilled = (topicId, response) => { 
  return { type: 'FETCH_FULFILLED', topicId, response }
}

const fetchRejected = (topicId, err) => {
  return { type: 'FETCH_REJECTED', topicId, err }
}

请注意，您的减速器应该适当地处理这些操作

单个提取操作创建者的逻辑

export const fetchSomeStuff = (url) => {
    return dispatch => {
        fetchData().then(
            response => dispatch(setOurData(response.data)),
            error => dispatch(apologise(error))
        );
    };
}

Fetch是一个基于承诺的请求库。因此，axios.get方法向给定url发出请求并返回一个承诺，如果成功，该承诺将得到解决，否则该承诺将被拒绝

import fetch from 'isomorphic-fetch'

const makeAPromiseAndHandleResponse = (topicId, url, dispatch) => {
    return fetch(url)
             .then(response => {
               dispatch(fetchFulfilled(topicId, response))
             })
             .catch(err => {
               dispatch(fetchRejected(topicId, err))
             }) 
}

如果我们的HTTP请求成功，我们的承诺将得到解决，中的代码将被执行。这将为给定的主题id发送一个FETCH_completed操作，其中包含来自请求（主题数据）的响应

如果HTTP请求不成功，我们将执行.catch中的代码，并发送FETCH\u REJECTED操作，该操作将包含主题ID和请求期间发生的错误

我们将请求错误处理逻辑放在这里。这可能涉及调度一个或多个进一步的操作，这些操作可能会重新尝试HTTP请求或将另一个请求发送到备选URL

由于这是一个异步过程，我们可以使用thunk操作创建者，该创建者将使用Redux thunk中间件来允许我们在将来调度其他异步操作

Thunk Action创建者是如何工作的？

我们的thunk action创建者能够在将来的某个日期发送多个操作

它将发送的一组操作将向我们的还原程序提供有关HTTP请求状态的信息

Thunk一词是延迟评估的同义词

这个单一thunk动作创建者是一个动作创建者，它将由我们的redux thunk中间件处理，因为它符合与thunk动作创建者关联的签名，即它返回一个函数

编写我们的thunk action创建者

export const fetchSomeStuff = (url) => {
    return dispatch => {
        fetchData().then(
            response => dispatch(setOurData(response.data)),
            error => dispatch(apologise(error))
        );
    };
}

我们的thunk action创建者返回一个函数。这个函数可以像任何普通函数一样返回它想要的任何东西，所以如果我们想要，我们可以将它设置为返回一个承诺

export const fetchSomeStuff = (url) => {
    return dispatch => {
        return fetchData().then(
            response => dispatch(setOurData(response.data)),
            error => dispatch(apologise(error))
        );
    };
}

上面的fetchSomeStuff函数是一个thunk操作创建者，它从同构fetch调用fetch。因此，此操作创建者返回一个承诺

export const fetchSomeStuff = (url) => {
    return dispatch => {
        return fetchData().then(
            response => dispatch(setOurData(response.data)),
            error => dispatch(apologise(error))
        );
    };
}

由于我们在调用fetchSomeStuff（我们的thunk action creator）时在thunk action creator返回的函数中返回此函数，因此将返回一个承诺。这是非常有用的，特别是对于我们可能希望检查在调用thunk action creator后的某个时间点是否调度了某些操作的测试

我们的thunk action creator返回我们在fetchSomeStuff thunk action creator中返回的函数

以下是Redux thunk中的代码，用于执行以下操作：

if (typeof action === 'function') {
  return action(dispatch, getState);
}

所以如果我们打电话

fetchSomeStuff('www.example.com')

我们得到一个函数

但是如果我们派一些东西

store.dispatch(fetchAllItems('www.example.com'))

我们得到了一个承诺

这两行代码之间的区别在于，当我们分派thunk action creator而不是简单地调用它时，它会通过中间件链。Redux thunk知道如何处理函数并将调用它们

所以本质上这就是配置redux thunk中间件时发生的情况，我们称之为store.dispatch

我们有一辆被派去的卡车

function thunkActionCreator(){
   return function middlewareInjectsStoreMethods({dispatch, getstate}){  
   }
}

当我们发送此操作时

return action(dispatch, getState, extraArgument);

我们以前在redux thunk中看到的代码将被执行

if (typeof action === 'function') {
  return action(dispatch, getState)
}

然后我们返回在thunk action creator中调用嵌套函数的结果

function thunkActionCreator(){
   return function middlewareInjectsStoreMethods({dispatch, getstate}){
   }
}

if (typeof action === 'function') {
    return action(dispatch, getState)
}

action表示thunk action创建者，而在内部调用action意味着返回名为middlewareInjectsStoreMethods的嵌套函数 鉴于呼叫

 return action(dispatch, getState) 

返回我们的嵌套函数（middlewareInjectsStoreMethods），并给出存储的dispatch和getState方法

在精神上，我们可以认为redux thunk就是这样做的

if (typeof thunkActionCreator  === 'function') {
     return function middlewareInjectsStoreMethods({dispatch,  getstate}){}
}

现在我们可以看到为什么我们必须在redux thunk action creator中返回一个函数。 我们的action creator需要访问以在将来发送进一步的操作。通过返回一个函数，我们可以在以后调用它，并且仍然可以访问dispatch。这种优雅的做事方式是我