Vite|Vue3 项目引入 axios

1. demo 演示

表单

账户:

密码:

邮箱:

电话:

用户id:

操作

⬇️返回数据⬇️

""

2. 实现方案

要在 Vite|Vue3 项目中引入 axios，可以按照以下步骤进行操作：

2.1. 安装 axios

在终端中运行以下命令来安装 axios。

npm install axios --save

2.2. 创建 axios 实例

在需要使用 axios 的组件中，创建一个 axios 实例。

// apis/axios.js
import axios from "axios";
// 创建axios实例
export const instance = axios.create({
  baseURL: "", // 设置基础 URL
  timeout: 5000, // 设置请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    const prefix = import.meta.env.DEV ? "/test" : "/blogapi";
    config.url = prefix + config.url;
    // 获取token，如果token存在，添加到请求头中
    const token = localStorage.getItem("token");
    token && (config.headers.TOKEN = `${token}`);
    config.headers["Content-Type"] = "application/json";
    return config;
  },
  (error) => Promise.reject(error)
);
export const get = (url, params) => {
  return instance.get(url, { params }).then((res) => res.data);
};
export const post = (url, params) => {
  return instance.post(url, params).then((res) => res.data);
};
export const _delete = (url, params) => {
  return instance.delete(url, { params }).then((res) => res.data);
};
export const put = (url, params) => {
  return instance.put(url, params).then((res) => res.data);
};

2.3. demo 演示代码

vue-script

<script setup>
import { ref, reactive } from "vue";
import { get, post, _delete, put } from "./../apis/axios.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-axios-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-axios-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>