Reactjs 调用函数

我有一个类API，其中包含一个我希望在我的组件中调用的函数

export default function(authentification){
axios.post('/login',params)
.then(response=> {
  localStorage.setItem(ACCESS_TOKEN, response.headers.authorization);
  localStorage.setItem(IS_AUTHENTICATED, true);
  this.setState({isAuthenticated:true});
})
.catch(error =>{
  const statusCode = error.response.status;
  if(statusCode === 401)
    errors.authentification = true;
  else if (statusCode === 404)
    errors.resource = true;
  else
    errors.server = true;

    this.setState({errors});
});
}

---

我没有找到如何在我的组件中调用此函数，以及如何返回其结果以将其放入setState中。首先：将setState与api助手方法分离，如：

export default function(authentification){
  axios.post('/login',params)
  .then(response=> {
    localStorage.setItem(ACCESS_TOKEN, response.headers.authorization);
    localStorage.setItem(IS_AUTHENTICATED, true);
    return {status: "ok"}
  })
  .catch(error =>{
    const statusCode = error.response.status;
    if(statusCode === 401)
      errors.authentification = true;
    else if (statusCode === 404)
      errors.resource = true;
    else
      errors.server = true;
    return {status: "error", errors}
  });
}

或者，如果要在api方法中使用异步/等待语法：

const authentification = async (params) => {
    const response = await axios.post('/login',params);
    const statusCode = response.status;
    if (statusCode >= 200 && statusCode < 300) {
        localStorage.setItem(ACCESS_TOKEN, response.headers.authorization);
        localStorage.setItem(IS_AUTHENTICATED, true);
        return {status: "ok"}
    }
    let errors = {};
    if (statusCode === 401) {
        errors.authentification = true;
    }
    else if (statusCode === 404) {
        errors.resource = true;
    }
    else {
        errors.server = true;
    }
    return {status: "error", errors}
}

export default authentification;

---

在file.js中，创建所需的所有函数并将其导出

let xxx = (authentification) => {
axios.post('/login',params)
.then(response=> {
  localStorage.setItem(ACCESS_TOKEN, response.headers.authorization);
  localStorage.setItem(IS_AUTHENTICATED, true);
  this.setState({isAuthenticated:true});
})
.catch(error =>{
  const statusCode = error.response.status;
  if(statusCode === 401)
    errors.authentification = true;
  else if (statusCode === 404)
    errors.resource = true;
  else
    errors.server = true;

    this.setState({errors});
});
}

export default xxx;

---

然后在您想使用它的地方导入它，就像-->从“路径”导入xxx一样

我重新构造了代码。我不知道这对员工来说是否是一个好的架构。但我还没有在我的组件中得到答案

类别认证API：

import axios from "axios";

const AuthentificationAPI = {
login(params){
    return  axios.post('/login',params);
},
}

export {AuthentificationAPI as default}

认证服务：

import { ACCESS_TOKEN, IS_AUTHENTICATED } from "constants/constants.js";
import AuthentificationAPI from "api//authentificationAPI.js";

const AuthentificationService = {
login(params){
    let errors  = {};

    AuthentificationAPI.login(params).then(response => {
        localStorage.setItem(ACCESS_TOKEN, response.headers.authorization);
        localStorage.setItem(IS_AUTHENTICATED, true);

        return {isAuthenticated:true};
      })
      .catch(error => {
        const statusCode = error.response.status;

        if(statusCode === 401)
            errors.authentification = true;
        else if (statusCode === 404)
            errors.resource = true;
        else
            errors.server = true;

        return errors;
      });

    },
 }

 export {AuthentificationService as default}

调用我的组件：

---

您不会从导出的函数调用

this.setState（）

。您应该创建一个执行身份验证的函数，然后在身份验证成功或失败时返回一个承诺。在

componentDidMount（）

或

onSubmit（）

中，调用函数，在组件本身中，使用

this.setState（）

更新状态变量。哪种是最佳解决方案：第一种或第二种您可以选择要使用的。。。async/await只是JavaCScript的一种较新语法。我将修改我的答案，将您的api函数重写为async await，以便使其保持一致

import { ACCESS_TOKEN, IS_AUTHENTICATED } from "constants/constants.js";
import AuthentificationAPI from "api//authentificationAPI.js";

const AuthentificationService = {
login(params){
    let errors  = {};

    AuthentificationAPI.login(params).then(response => {
        localStorage.setItem(ACCESS_TOKEN, response.headers.authorization);
        localStorage.setItem(IS_AUTHENTICATED, true);

        return {isAuthenticated:true};
      })
      .catch(error => {
        const statusCode = error.response.status;

        if(statusCode === 401)
            errors.authentification = true;
        else if (statusCode === 404)
            errors.resource = true;
        else
            errors.server = true;

        return errors;
      });

    },
 }

 export {AuthentificationService as default}

  let resp = AuthentificationService.login(params);

  console.log(resp);