我正在尝试在react.js 中创建一个登录表单。我有一个 Api，其中只有用户名和密码。现在我不知道如何在 React.js 中调用 Api。我看过教程，但没明白。我不是反应开发人员，我只是一个初学者。我的一位朋友帮助了我，他使用 JavaScript 调用了 Api。但我试图在 YouTube 和 chatGpt 的帮助下编写代码，但仍然遇到错误。下面是正在运行的 JavaScript 代码。
现在我想在 React 中编写与我的朋友用 JavaScript 编写的代码相同的代码。我可以编写 html 和 css，但我不能编写 javascript 及其库。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 py-2 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
Login Form
</h2>
<form id="loginForm" class="mt-8 space-y-6">
<div>
<label for="username" class="sr-only">Username:</label>
<input type="text" id="username" name="username" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Username">
</div>
<div>
<label for="password" class="sr-only">Password:</label>
<input type="password" id="password" name="password" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
</div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
Login
</button>
</form>
<p id="message" class="mt-2 text-center text-sm text-gray-600"></p>
</div>
</div>
<script>
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting normally
// Get username and password from the form
var username = $('#username').val();
var password = $('#password').val();
// Construct the URL with concatenated login and passw parameters
var apiUrl = 'http://portal.mashitec.com/SalesWebApi/api/User1/?login=' + encodeURIComponent(username) + '&passw=' + encodeURIComponent(password);
// Make POST request to API
$.ajax({
type: 'POST',
url: apiUrl,
success: function(response) {
// Check if the response matches the username
if (response === username) {
$('#message').text('Authorized');
} else {
$('#message').text('Not Authorized');
}
},
error: function(xhr, status, error) {
$('#message').text('Error: ' + error);
}
});
});
});
</script>
</body>
</html>```
创建处理 API 调用的特定文件是一个很好的做法。这有助于保持代码库干净，并更轻松地在一处管理所有与 API 相关的操作。在 src 目录中创建一个名为 api.js 的文件：
// src/api.js
import axios from 'axios';
const API_BASE_URL = 'https://api.yourdomain.com';
const instance = axios.create({
baseURL: API_BASE_URL,
timeout: 1000,
});
// You can add common headers or auth tokens here
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
export const fetchData = async () => {
try {
const response = await instance.get('/endpoint');
return response.data;
} catch (error) {
console.error('Error fetching data: ', error);
// Handle errors here or throw them to be handled where the function is called
throw error;
}
};
从 React 组件进行 API 调用
现在您可以在任何 React 组件中使用 api.js 中的 fetchData 函数。这是一个例子：
// src/App.js
import React, { useEffect, useState } from 'react';
import { fetchData } from './api';
function App() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetchData()
.then(data => {
setData(data);
setLoading(false);
})
.catch(err => {
setError(err);
setLoading(false);
});
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error loading data!</p>;
return (
<div>
<h1>Data Loaded</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default App;
处理错误
如上面的组件所示，在进行 API 调用时，错误处理至关重要。您可以在 API 调用函数内或直接在组件内处理错误，具体取决于您希望如何管理应用程序中的错误状态。