使用fetch发送post请求

在使用fetch API进行HTTP POST请求时，需要将请求方法设置为POST，并且通常会携带请求体（包含要发送的数据）。以下是一个React组件中使用fetch执行POST请求的示例：

Javascript

import React, { useEffect } from 'react';

function App() {
  const sendFormData = async (formData) => {
    try {
      // 设置请求选项，包括请求方法和请求头
      const options = {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json', // 如果发送JSON数据
          // 或者如果是表单数据：
          // 'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: JSON.stringify(formData), // 如果是JSON格式
        // 或者如果是表单数据：
        // body: new URLSearchParams(formData).toString()
      };

      const response = await fetch('https://api.example.com/data', options);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      console.log('Received data:', data);

      // 在这里处理返回的数据...
    } catch (error) {
      console.error('Error sending data:', error);
    }
  };

  useEffect(() => {
    // 假设我们有一个要发送的数据对象
    const formData = {
      id: '123',
      name: 'John Doe',
      email: 'john.doe@example.com',
    };

    sendFormData(formData);
  }, []); // 空数组意味着只在组件挂载时执行一次

  return (
    // 渲染你的组件内容...
  );
}

export default App;

在这个例子中，我们定义了一个异步函数sendFormData，它接受一个数据对象作为参数。然后创建一个包含请求方法、头部信息以及请求体的选项对象。根据API的需求，你可以选择不同的’Content-Type’头来匹配发送的数据类型（JSON或URL编码的表单数据）。最后，通过调用fetch函数发起POST请求，并处理响应结果。

下面对请求方法进行简单封装，以下为代码。
request封装代码：

const apiUrl = import.meta.env.VITE_API_URL;

export const post = (url:string, params: object)=>{
    return fetch(apiUrl+url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        mode: "cors",
        body: JSON.stringify(params)
    })
}

使用request：

import {post} from './utils/fetchRequest'

function App() {
	const postTest = () => {
	    post('/test/apply',
	      {
  	        username: "admin",
	        password: "1"
	      }
	    ).then(res => {
	      console.log('res', res);
	    })
	  }
	return (
    // 渲染你的组件内容...
  );
}
export default App;