使用 axios 发送 API 调用不成功

Question

I'm a beginner to React Redux and Redux-logic...I'm getting this error when trying to send a PUT request...I'm using Ducks as well and my code (services.js) as following..

import { createLogic } from "redux-logic";
import actions from "./actions";
import types from "./types";
import endPoints from "../../../util/EndPoints";
import * as API from "../../../util/HTTPClient";

const addRegion = createLogic({
  type: types.ADD_REGION,
  latest: true,
  debounce: 1000,

  processOptions: {
    dispatchReturn: true,
    successType: types.ADD_REGION_SUCCESS,
    failType: types.ADD_REGION_FAILED
  },

  process({ MockHTTPClient, getState, action }, dispatch, done) {
    let HTTPClient;
    if (MockHTTPClient) {
      HTTPClient = MockHTTPClient;
    } else {
      HTTPClient = API;
    }
    let object = action.payload;

    HTTPClient.Post(endPoints.ADD_REGIONS, object)
      .then(resp => {
        dispatch(actions.addRegionSuccess(resp.data));
        console.log(resp.data);
      })
      .catch(err => {
        let errorMessage;
        if (err.response && err.response.status == 400) {
          // errorMessage = err.response && err.response.data.error.message;
          errorMessage = err.response && err.response.data.errormessage;
        }
        dispatch(
          actions.addRegionFailed({
            title: "Error!",
            message: errorMessage
            // message: "errorMessage"
          })
        );
      })
      .then(() => done());
  }
});

const getRegion = createLogic({
  type: types.GET_REGION,
  latest: true,
  debounce: 1000,

  process({ MockHTTPClient, getState, action }, dispatch, done) {
    let HTTPClient;
    if (MockHTTPClient) {
      HTTPClient = MockHTTPClient;
    } else {
      HTTPClient = API;
    }

    let object = action.payload;

    HTTPClient.Get(endPoints.GET_REGIONS, object)
      .then(resp => {
        dispatch(actions.getRegionSuccess(resp.data));
      })
      .catch(err => {
        dispatch(
          actions.getRegionFailed({
            title: "Error!",
            message: err
          })
        );
      })
      .then(() => done());
  }
});

const editRegion = createLogic({
  type: types.EDIT_REGION,
  latest: true,
  debounce: 1000,

  process({ MockHTTPClient, getState, action }, dispatch, done) {
    let HTTPClient;
    if (MockHTTPClient) {
      HTTPClient = MockHTTPClient;
    } else {
      HTTPClient = API;
    }

    // let object = action.payload;
    let selectedRegion = action.payload;
    HTTPClient.Put(endPoints.EDIT_REGIONS, selectedRegion)

      .then(resp => resp.data)
      .then(data => dispatch(actions.editRegionSuccess(data)))

      .catch(err => {
        //console.log("TCL: process -> err", err);
        var errorMessage;
        if (err.response && err.response.status == 400) {
          errorMessage = err.response && err.response.data.error.message;
        }
        dispatch(
          actions.editRegionFailed({
            title: "Error!",
            //message: errorMessage
            message: err
          })
        );
      })
      .then(() => done());
  }
});

export default [addRegion, getRegion, editRegion];

I'm trying to send some data to a backend api (using PUT request) but it gives that it's a BAD request. Where should I make changes in my code?

Answer 1

In the header you say you are using axios but you are not. Instead, you are using HTTPClient.

const axios = require('axios');
axios.put(endPoints.EDIT_REGIONS, selectedRegion)

More examples here