使用 fetch 登录，但现在使用 axios [关闭]

Posted 2023-02-22

【中文标题】使用 fetch 登录，但现在使用 axios [关闭]

【英文标题】：Login using fetch but now with axios [closed]

【发布时间】：2021-11-10 23:46:18

【问题描述】：

我正在为我的 React-Adonis 应用程序进行登录提交，我的提交工作正常，但我需要更改用于 axios 的获取即时消息。 我该怎么做？

我已经安装了axios依赖并导入了

import axios from 'axios'; 

  const submitHandler = (event: React.FormEvent) => 
    event.preventDefault();
    const enteredEmail = emailInputRef.current!.value;
    const enteredPassword = passwordInputRef.current!.value;

    if (enteredPassword.length < 6) 
      toast.warn('Password must be 6 or more digits.');
      return;
    
    let url = 'http://127.0.0.1:3333/login';
    fetch(url, 
      method: 'POST',
      body: JSON.stringify(
        email: enteredEmail,
        password: enteredPassword,
        returnSecureToken: true,
      ),
      headers: 
        'Content-Type': 'application/json',
      ,
    )
      .then((res) => 
        if (res.ok) 
          return res.json();
        
      )
      .then((data) => 
        console.log(data);
        if (data.token) 
          setTimeout(() => 
            dispatch(authActions.login(data.token));
          , 1000);
          return;
        
      )
      .catch((err) => 
        console.log(err);
      );
  ;

【问题讨论】：

你能清楚地说明你的问题是什么吗？

我将从 Axios 文档开始 ~ github.com/axios/axios#axios

如果它与 fetch 合作，为什么要切换到 Axios（或其他任何东西）？

@Phil 也许 IE 支持什么的？ （我希望不会）

我不知道有 axios 文档，它解决了我的问题。谢谢！！！

【参考方案1】：

  const submitHandler = (event: React.FormEvent) => 
    event.preventDefault();
    const enteredEmail = emailInputRef.current!.value;
    const enteredPassword = passwordInputRef.current!.value;

    if (enteredPassword.length < 6) 
      toast.warn('Password must be 6 or more digits.');
      return;
    
    let url = 'http://127.0.0.1:3333/login';

    axios
      .post(url, 
        email: enteredEmail,
        password: enteredPassword,
        returnSecureToken: true,
      )
      .then((res: any) => 
        if (res.status === 200) 
          if (res.data.token) 
            toast.success('Logged In with sucess!', 
              position: 'bottom-center',
              hideProgressBar: true,
            );
            setTimeout(() => 
              dispatch(authActions.login(res.data.token));
            , 1000);
            return;
          
        
      )
      .catch((err: any) => 
        toast.error('Email or Password wrong.');
      );
  ;

【参考方案2】：

首先，推荐大家先阅读axiosdocumentation。但总而言之，您将创建一个 axios 实例并使用以下内容更改 fetch：

axios.post(url, JSON.stringify(
    email: enteredEmail,
    password: enteredPassword,
    returnSecureToken: true,
  )

这将返回一个承诺，因此您可以继续使用您的 .then / .catch

【讨论】：

这不会将数据发布为application/json

感谢文档，我真的不知道它存在。 JSON.stringify 在 axios 中不起作用，我在 url 之后发送数据，axios .post(url, email: enterEmail, password: enterPassword, returnSecureToken: true, )