const response= await proxy.$axios.get('/get_data') console.log(response); 2 封装 2.1 单独创建一个api.js import axios from 'axios'import { useCookies } from"vue3-cookies"; import router from'@/router'const { cookies }=useCookies(); axios.defaults.timeout= 50000;//请求拦截器axios.inte...
1.安装axios npm install axios 2.在util文件夹下新建axios.js文件,用来处理axios拦截器 axios.js内容:(注意:其中router需要写成这种形式,不然会报Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')错误) /** * 文件主要用来创建 axios 实例,然后添加请求拦截器和响应拦截器 *...
api.ts进行接口API的统一管理 axios.ts封装请求配置拦截器 status.ts管理接口返回状态码 三、axios.ts 代码内逐行解释 代码语言:javascript 复制 importaxiosfrom'axios';import{showMessage}from"./status";// 引入状态码文件import{ElMessage}from'element-plus'// 引入el 提示框,这个项目里用什么组件库这里引什么/...
安装axios:cnpm install axios。 引入:在项目的src文件夹中新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口。 2、axios的封装(直接贴代码) //在http.js中 /** * axios封装 * 请求拦截、响应拦截、错误统一处理 */ import ax...
api封装的是通过封装get/post/jsonp等请求,使得页面无需直接访问后代而是调用相关方法直接获取相关的后代数据,避免过多的数据处理逻辑,将重点放在数据渲染上。 1,准备阶段 a,首先创建api访问层(文件夹),新建两个文件分别叫axios和api的JavaScript文件。再api文件夹再新建一个文件夹base,用于存放请求路径,新建dev,pro...
const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_BASE_API, timeout: 10 * 1000, // 请求超时时间 headers: { "Content-Type": "application/json;charset=UTF-8" } }); 抽取hook 有些时候我们不希望项目中直接使用import.meta.env去读取env配置,这样可能会不便于管理,这个...
1.src下新建api/index.ts文件,封装axios // api/index.tsimportaxios,{typeAxiosInstance,AxiosError,typeAxiosRequestConfig,typeAxiosResponse}from'axios'import{ElMessage}from'element-plus'import{typeResultData}from'./index.data'constbaseURL:string=import.meta.env.VITE_API_BASE_URLenumRequestEnums{TIMEOUT...
cnpm install axios --save-dev; // 安装axios cnpm install qs --save-dev; // 安装qs模块,用来序列化post类型的数据,否则后端无法接收到数据 模块引入 在src目录下创建一个service目录,用于存放接口封装的相关文件。然后在service目录中创建service.js,用于axios、qs模块的引入,并在此文件中对axios进行封装。代...
这样，我们就成功地将 axios 封装成了 Vue3 插件，并将其注册到了应用程序中。创建接口 在src/api...
api/user.ts文件中: importrequestfrom"@/utils/request";exportconstlogin=(data?:any)=>request.post('/login',data); 到这里基础封装已经完成,接下来咱们给axios添加一些功能。 错误日志收集 需解决的问题: 收集接口错误信息 所以为了解决这个问题,我们可以给axios扩展一个log方法,去解决这个问题。