前端vue开发技巧：使用原生fetch 发送post请求

菜小编

2025-2-9

WEB前端开发

1. vue开发使用原生fetch 发送post请求

在 Vue 2 项目中使用原生的 fetch API 发送 POST 请求也是一个常见的需求。

下面是一个完整的示例，展示如何在 Vue 2 组件中发送 POST 请求并将响应数据显示在组件中。

1.1. 在 Vue 组件中使用 `fetch` 发送 POST 请求

假设我们要向一个 REST API 发送 POST 请求，并显示服务器返回的数据。以下是一个完整的示例：

1.1.1. 创建 Vue 组件

<template>
  <div>
    <h1>User Form</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="formData.name" required />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" v-model="formData.email" required />
      </div>
      <button type="submit">Submit</button>
    </form>
    <div v-if="responseMessage">
      <h2>Response:</h2>
      <pre>{{ responseMessage }}</pre>
    </div>
</div>
</template>

<script>
export default {
data() {
    return {
      formData: {
        name: '',
        email: ''
      },
      responseMessage: null
    };
  },
methods: {
    asyncsubmitForm() {
      try {
        const response = awaitfetch('https://jsonplaceholder.typicode.com/posts', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.formData)
        });

        if (!response.ok) {
          thrownewError(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        this.responseMessage = JSON.stringify(data, null, 2);
      } catch (error) {
        console.error('Error submitting form:', error);
        this.responseMessage = `Error: ${error.message}`;
      }
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
form {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
}

input {
margin-bottom: 10px;
padding: 5px;
width: 100%;
}

button {
padding: 10px20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
</style>

1.2. 解释

1. 模板部分：
- • 使用元素创建一个表单，并绑定 @submit.prevent 事件处理器 submitForm 方法。
- • 使用 v-model 指令将输入框的值双向绑定到 formData 对象的相应属性上。
- • 显示提交成功后的响应数据。
2. 脚本部分：
- • data 函数返回一个对象，其中包含 formData 和 responseMessage。
  - • formData 用于存储表单数据。
  - • responseMessage 用于存储服务器返回的响应数据或错误信息。
- • methods 对象中定义了 submitForm 方法。
  - • submitForm 方法是一个异步函数，使用 fetch 发送 POST 请求到指定的 URL。
  - • 设置请求头 Content-Type 为 application/json。
  - • 使用 JSON.stringify 将 formData 对象转换为 JSON 字符串。
  - • await fetch 发送请求并等待响应。
  - • 检查响应的状态码是否为 ok（即 200-299 范围内），如果不是，则抛出错误。
  - • 使用 response.json() 将响应体解析为 JSON 格式。
  - • 将解析后的数据赋值给 responseMessage。
  - • 如果在请求过程中发生错误，捕获并记录错误信息，并将错误信息显示给用户。
3. 样式部分：
- • 为表单和按钮添加了一些基本的样式。