Vite|Vue3 项目封装 fetch

1. demo 演示

表单

账户:

密码:

邮箱:

电话:

用户id:

操作

⬇️返回数据⬇️

""

2. 实现方案

2.1. 封装 fetch API

封装一个 fetch API，用于发送 HTTP 请求。该 API 应该具有以下功能：

• 发送 GET 请求
• 发送 POST 请求
• 发送 PUT 请求
• 发送 DELETE 请求

// apis/fetch.js
export const prefix = "/blogapi";
export const headers = {
  "Content-Type": "application/json;charset=utf-8",
  token: localStorage.getItem("token"),
};
// 封装fetch请求
export const request = (url, { params, method = "get", headers = {} }) => {
  const options = {
    method,
    headers: {
      "Content-Type": "application/json;charset=utf-8",
      token: localStorage.getItem("token"),
      ...headers,
    },
    body: JSON.stringify(params),
  };
  return fetch(prefix + url, options).then((res) => res.json());
};
export const get = (url, params, options = {}) =>
  request(url, { params, method: "get", ...options });
export const post = (url, params, options = {}) =>
  request(url, { params, method: "post", ...options });
export const _delete = (url, params, options = {}) =>
  request(url, { params, method: "delete", ...options });
export const put = (url, params, options = {}) =>
  request(url, { params, method: "put", ...options });

2.2. demo 演示代码

vue-script

<script setup>
import { ref, reactive } from "vue";
import { get, post, _delete, put } from "../apis/fetch.js";

const resultData = ref("");
const params = reactive({
  username: "张三",
  password: "123",
  email: " zhangsan@163.com",
  telephone: "13812345678",
});
const id = ref(0);

const doRegister = async (params) => {
  const result = await post("/users/register", params);
  resultData.value = result;
};
const doLogin = async (params) => {
  const result = await post("/users/login", params);
  if (result.success) {
    localStorage.setItem("token", result.data.token);
  }
  resultData.value = result;
};
const getUserInfo = async () => {
  const result = await post("/users/userInfo");
  resultData.value = result;
};
const doPut = async (params) => {
  const result = await put(`/users`, params);
  resultData.value = result;
};
const doPut2 = async (params) => {
  const result = await put(`/users/${params.id}`, params);
  resultData.value = result;
};
const doDelete = async (params) => {
  const result = await _delete(`/users/${params.id}`, params);
  resultData.value = result;
};
const doGet = async (params) => {
  const result = await get(`/users`, params);
  resultData.value = result;
};
const doGet2 = async (params) => {
  const result = await get(`/users/${params.id}`);
  resultData.value = result;
};
</script>

vue-template

<template>
  <div class="test-api-fetch-container">
    <h3>表单</h3>
    <div class="form-wrap">
      <div>
        <label>账户: </label
        ><el-input v-model="params.username" placeholder="请输入用户名" />
      </div>
      <div>
        <label>密码: </label
        ><el-input v-model="params.password" placeholder="请输入密码" />
      </div>
      <div>
        <label>邮箱: </label
        ><el-input v-model="params.email" placeholder="请输入邮箱" />
      </div>
      <div>
        <label>电话: </label
        ><el-input v-model="params.telephone" placeholder="请输入手机号" />
      </div>
      <div>
        <label>用户id: </label><el-input v-model="id" placeholder="请输入id" />
      </div>
    </div>
    <h3>操作</h3>
    <el-button type="primary" @click="doRegister(params)"
      >注册用户-post</el-button
    >
    <el-button type="success" @click="doLogin(params)">登录用户-post</el-button>
    <el-button type="success" @click="getUserInfo()"
      >获取用户数据-post</el-button
    >
    <el-button type="warning" @click="doPut({ id, ...params })"
      >更新用户-put</el-button
    >
    <el-button type="warning" @click="doPut2({ id, ...params })"
      >更新用户-put-RESTful风格</el-button
    >
    <el-button type="danger" @click="doDelete({ id })"
      >删除用户-delete</el-button
    >
    <el-button type="info" @click="doGet({ id })">查询用户-get</el-button>
    <el-button type="info" @click="doGet2({ id })"
      >查询用户-get-RESTful风格</el-button
    >
    <p>⬇️返回数据⬇️</p>
    <pre>{{ JSON.stringify(resultData, null, 2) }}</pre>
  </div>
</template>

vue-style

<style lang="scss">
.test-api-fetch-container {
  h3 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .form-wrap {
    display: flex;
    flex-wrap: wrap;

    label {
      display: inline-block;
      padding: 0 10px;
      width: 80px;
      vertical-align: middle;
      line-height: 32px;
      margin-bottom: 10px;
    }

    .el-input {
      width: 180px;
      margin-bottom: 10px;
    }
  }

  button.el-button {
    margin: 0 10px 10px 0;
  }
}
</style>