如何在REACT中為連接到node.js的Axios路由創建一個單獨的文件夾

Question

您好，我試圖為我的axios路由創建一個單獨的文件夾。 我不希望它們在React的組件文件中。

我在以下文件夾下嘗試了此操作，與我的components文件夾分開。 src>操作>身份驗證

import axios from 'axios';

export const signupUser = (user, history) => dispatch => {
  axios.post('http://localhost:3000/signup', user)
  console.log(user)
    .then(res => history.push('/login'))
    .catch(err => {
      console.log(err);

    });
};

在Signup.js組件中，我有以下內容，目前無法使用

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { signupUser } from '../actions/authentication';
import axios from 'axios';

let today = new Date();
let date = today.getFullYear()+ '-' +  (today.getMonth()+1)+ '-' +today.getDate();




class Signup extends Component {

  constructor() {
    super()
    this.state = {
      first_name: '',
      last_name: '',
      user_name: '',
      email: '',
      password: '',
      created_on: date,
      isSignedup: false
    }

    this.handleInputChange = this.handleInputChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
    console.log(this.state);
  }

  handleSubmit = (e) => {
    e.preventDefault();

    const user = {

      first_name: this.state.first_name,
      last_name: this.state.last_name,
      email: this.state.email,
      user_name: this.state.user_name,
      password: this.state.password,
      created_on: this.state.created_on,
      isSignedup: !this.state.isSignedup
    }
    .then(data => {
      console.log(data);
      this.props.history.replace('/login');
    })
    .catch(err => {
      console.log(err);
    })
  }

如果我在組件內部具有實際的axios路由，則它僅在我的組件> Signup.js中有效，如下所示：

handleSubmit = (e) => {
    e.preventDefault();

    axios.post('http://localhost:3000/signup', {

      first_name: this.state.first_name,
      last_name: this.state.last_name,
      email: this.state.email,
      user_name: this.state.user_name,
      password: this.state.password,
      created_on: this.state.created_on,
      isSignedup: !this.state.isSignedup
    })
    .then(data => {
      console.log(data);
      this.props.history.replace('/login');
    })
    .catch(err => {
      console.log(err);
    })
  }

我一直收到的錯誤是.then不是函數。 有人可以幫我解決這個問題嗎？ 先感謝您。

Answer 1

您遇到錯誤。由於以下代碼，該.then is not a function ：

const user = {

  first_name: this.state.first_name,
  last_name: this.state.last_name,
  email: this.state.email,
  user_name: this.state.user_name,
  password: this.state.password,
  created_on: this.state.created_on,
  isSignedup: !this.state.isSignedup
}
.then

那不是有效的javascript。 將對象分配給變量不會創建承諾。 您必須實際調用signupUser 。

此外，如果您從不調用調度功能，為什么不將它傳遞給注冊函數，我也不明白？

Answer 2

您的思路正確，因為它使應用程序的設計更具模塊化。

您可以創建一個名為apis/的文件夾，而不必這樣命名，但我僅舉一個例子。 然后在其中創建一個名為myjson.js的文件，再次將其命名為您認為最好的文件。 在該文件夾內，您將具有以下內容：

import axios from "axios";

export default axios.create({
  baseURL: "https://api.myjson.com"
});

然后，您可以在動作創建者內部將其實現為myJson.post()

您還可以執行以下操作：

import React, { Component } from "react";
import axios from "axios";

const ROOT_URL =
  "https://exampleurl.com";

class SignUpForm extends Component {
  state = { phone: "" };

  handleSubmit = () => {
    axios
      .post(`${ROOT_URL}/createUser`, {
        phone: this.state.phone
      })
      .then(() => {
        axios.post(`${ROOT_URL}/requestOneTimePassword`, {
          phone: this.state.phone
        });
      });
  };

上面的課程當然是基於一次身份驗證的密碼類型，因此請根據您的體系結構的邏輯對其進行定制。

另外，如果您要將constructor函數與super(props)一起使用，則需要像我剛才那樣將props傳遞給它。

您可以通過使用ES7並通過分配來避免所有這些情況

state = {
  first_name: '',
  last_name: '',
  user_name: '',
  email: '',
  password: '',
  created_on: date,
  isSignedup: false
}

您已經在handleSubmit使用了箭頭功能，因此無需這樣做： this.handleSubmit = this.handleSubmit.bind(this); 箭頭功能正在采取的背景下照顧this 。

我們可以更進一步，通過使用如下ES7 async / await語法來重構handleSubmit函數，使其看起來更整潔：

handleSubmit = async () => {
 await axios.post(`${ROOT_URL}/createUser`, {
   phone: this.state.phone
 });
 await axios.post(`${ROOT_URL}/requestOneTimePassword`, {
   phone: this.state.phone
 });
};

為了處理錯誤，由於我們使用的是異步/等待，我們可以使用try / catch塊包裝所有等待的內容，如下所示：

handleSubmit = async () => {
    try {
      await axios.post(`${ROOT_URL}/createUser`, {
        phone: this.state.phone
      });

      await axios.post(`${ROOT_URL}/requestOneTimePassword`, {
        phone: this.state.phone
      });
    } catch (err) {
      console.log(err);
    }
  };

這樣，您就可以捕獲並控制台記錄錯誤。

並且try / catch在ES2015 / 16/17中並不是新事物，已經存在了一段時間。

本質上，每當您要處理由await語句管理的請求引發的錯誤時，我們都可以使用try / catch語句包裝它。

失敗的網絡請求響應將作為錯誤對象傳遞，我們可以對其進行控制台日志以查看發生了什么。