vue3+element-plus搭建后台管理系统（二）

最新推荐文章于 2024-07-21 22:49:36 发布

前端小悸动

最新推荐文章于 2024-07-21 22:49:36 发布

阅读量1k

点赞数 2

分类专栏： Vue 文章标签： javascript 前端 json 接口

本文链接：https://blog.csdn.net/qq_41884425/article/details/122039446

版权

本文档介绍如何在Vue3项目中配置API接口，包括fetch文件的设置和登录接口的实现。首先在src目录下创建api目录，并在其中建立fetch.js文件，然后使用axios进行接口调用。接着在api目录下编写登录接口文件，内容需根据实际后端接口数据来填充。至此，基本的接口配置已完成。

摘要由CSDN通过智能技术生成

(二) Vue3项目的api接口配置 fetch文件配置登录接口

api接口配置 fetch文件配置

在src目录下新建api目录并创建fetch.js文件

npm install axios 自行安装axios

import axios from 'axios';

let baseURL = 'xxx';//填自己的baseURL
// let baseURL = 'http://localhost:8004';
//使用自定义配置新建一个 axios 实例
//baseURL 基本url
//timeout 设置网络超时 设置了在5000毫秒内请求数据 如果没有请求成功就执行错误函数

const instance = axios.create({
    baseURL: baseURL,
    timeout: 5000,  // 请求超时时间
    //Content-Type（内容类型） Content-Type 标头告诉客户端实际返回的内容的内容类型。
    headers: {'content-type': 'application/json'} //设置请求头请求格式为JSON
});
//axios提供了拦截器，用于加载我们在发送每次请求或者得到响应后，进行对应的处理。
// 请求拦截器（在请求之前进行一些配置） 请求拦截 interceptors.request.use（）
// 请求拦截的作用：
// 比如config中的一些信息不符合服务器的要求，得及时拦截下来更改。
// 比如每次发送网络请求的时候，都希望在界面中显示一个动态加载的请求图标，就是一直在转圈圈，让用户知道当前页面正在加载数据，准备渲染视图。
// 比如某些网络请求（比如登录token）,必须携带一