Vite|Vue3 项目引入 axios
1. demo 演示
表单
操作
⬇️返回数据⬇️
""
2. 实现方案
要在 Vite|Vue3 项目中引入 axios,可以按照以下步骤进行操作:
2.1. 安装 axios
在终端中运行以下命令来安装 axios。
bash
npm install axios --save
2.2. 创建 axios 实例
在需要使用 axios 的组件中,创建一个 axios 实例。
javascript
// 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 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>
<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 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>