vue3封装接口(自测可用)

注:别忘记安装axios

在实际的项目实战中如果我们不对接口加以管理,整篇看着就很乱,这个时候我们就要用到接口封装了。

废话不多说直接上代码!!!

首先是request.js

复制代码
import axios from "axios";

// 使用环境变量来设置基础URL
const baseURL = process.env.VUE_APP_API_BASE_URL || "接口前缀http://xxxxxxxxxxxxxx";

const service = axios.create({
  baseURL: baseURL,
  timeout: 5000,
  headers: {
    "Content-type": "application/json;charset=utf-8"
  }
});

service.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, error => {
  console.error("Request error: ", error);
  return Promise.reject(error);
});

service.interceptors.response.use(response => {
  if (response.status === 200) {
    return response.data;
  } else {
    // 可以根据需要添加更多的错误处理
    console.error("Response error: ", response);
    return Promise.reject(new Error("Error with status code " + response.status));
  }
}, error => {
  // 对常见的HTTP错误进行处理
  if (error.response) {
    // 请求已发出,服务器回复状态码不在2xx范围
    console.error("Error status: ", error.response.status);
    // 根据返回的状态码进行不同的处理
    // 例如: if (error.response.status === 401) { // 处理登录过期 }
  } else {
    // 服务器连回应都没有返回
    console.error("Network error: ", error);
  }
  return Promise.reject(error);
});

export default service;

其次api.js

post方法

复制代码
// 我要用到的一些接口
import service from "@/request/index";
// 引入接口
// 如果在 JavaScript 中引入接口不需要进行类型标注
// import { ILoginData } from "@/type/login";

// 登录接口
export function index(data) {
    return service({
        url: "/index/index",
        method: "POST",
        data: data
    });
}

get方法

复制代码
export function index(queryParams) {
    return service({
        url: "/index/index",
        method: "GET",
        params: queryParams
    });
}

然后home.vue

到这里就非常简单了,直接import引入相应的名称在使用就可以了

复制代码
<template>
  <div>
    <div @click="inds">加载数据</div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { index } from "@/request/api";



const inds = async () => {
  try {
    const res = await index();
    console.log(1, res);
  } catch (err) {
    console.error(2, err);
   
  } finally {
    console.log(3);
  }
};
</script>

最后封装接口请求数据

首页不需要参数,可以直接请求,那么需要参数的怎么办呢?有方法

这两种方法都行没什么不一样的

方法一

复制代码
<script setup>
import { ref } from 'vue';
import { index } from "@/request/api";



const inds = async () => {
  try {
    let id = 1119;//比如接口需要id就声明id,如果是name就写name
    const res = await index({id});
    console.log(1, res);
  } catch (err) {
    console.error("失败", err);
   
  } 
};
</script>

方法二

复制代码
<script setup>
import { ref } from 'vue';
import { index } from "@/request/api";



const inds = async () => {
  try {
    const res = await index({id:1119});
    console.log(1, res);
  } catch (err) {
    console.error("失败", err);
   
  } 
};
</script>

到这里就结束了感谢观看,有疑问可以在评论区写出来。

相关推荐
顽疲2 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好35 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享36 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript