React系列之useRequest Hook

一、简介

        本文将会基于react 的useReducer hook实现http 请求功能，通过loading状态判断请求进度，通过doRequest发起调用，通过data和error获取请求结果。

二、技术实现

useRequest.js

import {useReducer, useState} from "react";
import {axios} from "axios"

//  请求状态
const initialState = {
  isLoading: null,
  data: null,
  error: null
};

// reducer
const reducer = (state, action) => {
  if (action.type === START_INVOKE) {
    return {
      ...state,
      isLoading: true
    }
  } else if (action.type === INVOKE_SUCCESS) {
    return {
      ...state,
      isLoading: false,
      data: action.data
    }
  } else if (action.type === INVOKE_FAILED) {
    return {
      ...state,
      isLoading: false,
      error: action.error
    }
  }
}


// action type
const START_INVOKE = "START_INVOKE";

const INVOKE_SUCCESS = "INVOKE_SUCCESS";

const INVOKE_FAILED = "INVOKE_FAILED";

export const useRequest = () => {

  // 使用useReducer hook
  const [state, dispatch] = useReducer(reducer, initialState,()=>initialState );

  // 发起请求
  const doRequest = (uri, body, headers, method) => {
    dispatch({
      type: START_INVOKE
    })
    return axios(
      {
        url: uri,
        method: method,
        headers: headers,
        data: body
      }
    ).then(response => {
      dispatch({
        type: INVOKE_SUCCESS,
        data: response.data
      })
    }).catch(error => {
      dispatch({
        type: INVOKE_FAILED,
        error: error
      })
    });
  }

  return {state, doRequest};
}