VUE3项目学习系列--Axios二次封装（五）

原创 已于 2024-03-12 00:07:13 修改 · 1.5k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue3 #mock #axios

于 2024-03-12 00:05:32 首次发布
本文介绍了如何在Vue项目中使用Axios进行网络请求的封装，包括创建axios实例、添加请求和响应拦截器，以及如何配置mock接口进行本地测试。重点展示了如何在服务端和客户端使用Axios，并演示了mock接口的安装和配置过程。

Axios中文文档 | Axios中文网 (axios-http.cn)

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。在项目中进行二次封装的主要目的是为了使用其请求与响应的拦截处理。

1、依赖安装

pnpm install axios

2、配置

在src根目录下创建utils/request.ts，详细配置参考axios官网

// 进行axios二次封装，使用请求与响应拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 1、创建axios实例
const instance = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
最低0.47元/天 解锁文章
详解vue axios二次封装
10-18
Vue Axios 二次封装是将官方提供的 Axios 库根据项目的实际需求进行定制化处理，以提高开发效率和代码的可维护性。在这个过程中，通常会包括设置公共参数、拦截器、错误处理等方面的工作。 首先，引入 Axios 和 QS ...
vue3 axios二次封装（js，ts两个版本）
jieweiwujie的博客
02-16 1253
可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)结束、简化服务器返回的数据、处理http网络错误)使用响应拦截器，可以在响应拦截器中处理一些业务(2 新建一个文件夹。
vue3中axios的二次封装
weixin_47193930的博客
05-22 1825
vue3中axios的封装
axios的二次封装
最新发布
weixin_49157844的博客
10-25 340
③ 添加请求拦截器：在请求被处理之前拦截，在这里可以统一配置请求头、添加 token、封装 get，post，put，delete 请求、加上接口错误重试机制等等。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，特性【摘自。④ 添加响应拦截器：在这里对 http 错误码进行拦截、简化返回的信息等。
Vue3使用Axios请求二次封装（包含跨域配置）
qq_45020145的博客
06-12 4487
axios在Vue3中的二次封装
vue3 axios二次封装
weixin_52772897的博客
09-13 1117
1.在src下面新建一个目录，在目录里面新建一个http.js。2.在发送请求的组件中引入并使用封装的axios。
Vue3 axios封装 二次封装
m0_75243946的博客
09-06 601
不传参的情况下可以传个{ } (空) ,不然会报错说只传入了一个参。注意:要在声明中使用 :any 不然会报错。创建api文件夹下http.ts文件。创建api文件夹下api.ts文件。在main.ts里面引入全局。
vue学习-----二次封装axios和请求发送详解
快来一起学习前端知识把！加油，前端人
09-20 473
同源策略：就是我我们的浏览器出于安全考虑，只允许与本域（同协议，同域名，同端口的就叫本域）下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。当我们向不同源的网站发起请求时，就会产生跨域问题，（跨域中请求是发送出去了，服务器响应了，但是会被浏览器的同源策略所拦截，使我们不能得到响应）
前端vue3的axios二次封装
m0_61132275的博客
01-12 1162
默认情况下，Vite 在 vite/client.d.ts 中为 import.meta.env 提供了类型定义。随着在 .env[mode] 文件中自定义了越来越多的环境变量，你可能想要在代码中获取这些以 VITE_ 为前缀的用户自定义环境变量的 TypeScript 智能提示。在前端开发中，常见的环境包括 development（开发环境）和 production（生产环境）。地址可以放置到环境变量中，在vue3+vite+ts的项目中，创建env文件如下。内容没有问题后就是如何动态更换请求的URL。
credit-h5:vue-cli3、router3、axios二次封装、modal弹窗、toast提示
04-30
vue create projectName //创建项目 vue -h(vue --help) //查看vue帮助 vue -V(vue --version) //vue版本 项目指令 npm install //安装本地依赖 npm run serve //开发环境 npm run build //生产环境 npm i axios -S ...
vue3中axios二次封装
2302_77290281的博客
09-05 384
2.在api文件夹下创建两个文件，api.ts和http.ts(名字尽量写成这种)1.在src文件下，创建一个api文件夹。3.下来就可以在vue文件里调用了。使用import 导入接口。
vue3.0中的axios二次封装
qq252750818的博客
06-01 3816
vue项目中用的是aixos来进行请求，但是项目中接口请求比较多，而且vue3.0也不像vue2.x一样在入口文件引入后直接挂载到全局，比如这样： 这是vue2.x的挂载全局的写法，很方便。但是vue3.0中不支持直接挂载到全局，且vue3.0中更习惯在哪里使用在哪里引入，比如这样： 这样虽然方便一些，但是随着代码越来越多，接口也越来越多，使用起来还是很不方便的，而且也不方便管理，这时候就需要我们根据个人需求进行二次封装1.首先可以在src目录下创建一个文件夹，用于放置文件我个人习惯是先建一个用于放
vue3 axios 二次封装（简单）所有项目可用
m0_53579242的博客
05-08 1090
axios封装 可以直接使用！！！！！
vue3后台管理框架之axios二次封装
m0_52704461的博客
10-16 508
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候我们经常会把axios进行二次封装。目的:1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
vue3 axios 的二次封装使用
qq_43853213的博客
04-07 951
1.request.js import axios from "axios"; import { ElMessage } from 'element-plus' import router from "../routers"; import config from "../config"; const TOKEN_ERR = "token失效了" const NET_WORK = "网络有问题，请检查一下网络把" const service = axios.create({ baseURL:
Vue——axios的二次封装
weixin_71407122的博客
10-17 1183
Vue——axios的二次封装
Vue —— axios的二次封装
Bonsoir777的博客
10-24 757
本文主要介绍如何对 axios 进行二次封装
Vue3二次封装axios
qq_39691676的博客
07-26 453
main.js 文件 >>> 引入接口文件。
vue3-axios 二次封装
08-20
在 Vue 3 中对 `axios` 进行二次封装是一种常见的优化方式，可以提高代码的可维护性和复用性。以下是一个较为完整的封装流程，结合项目结构和模块化思想，提供一个清晰的封装方案。 ### 创建 `axios` 实例 首先，在项目中安装 `axios`： ```bash npm install axios ``` 然后，创建一个专门用于封装 `axios` 的文件，例如在 `src/services/axios.ts` 中创建实例： ```typescript // src/services/axios.ts import axios from &#39;axios&#39;; // 创建 axios 实例 const service = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || &#39;/api&#39;, // 从环境变量中获取基础路径 timeout: 5000, // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( (config) => { // 在发送请求之前做些什么，例如添加 token return config; }, (error) => { // 处理请求错误 return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( (response) => { // 对响应数据做点什么，例如统一处理 data return response.data; }, (error) => { // 对响应错误做点什么，例如统一处理错误信息 return Promise.reject(error); } ); export default service; ``` ### 封装 API 接口 接下来，可以在 `src/services/api` 文件夹中按模块分别封装接口。例如，创建 `user.ts` 和 `product.ts`： ```typescript // src/services/api/user.ts import axios from &#39;../axios&#39;; export const getUserInfo = (id: number) => { return axios.get(`/user/${id}`); }; export const login = (data: { username: string; password: string }) => { return axios.post(&#39;/login&#39;, data); }; ``` ```typescript // src/services/api/product.ts import axios from &#39;../axios&#39;; export const getProductList = () => { return axios.get(&#39;/products&#39;); }; export const createProduct = (data: { name: string; price: number }) => { return axios.post(&#39;/products&#39;, data); }; ``` ### 全局挂载 `axios` 在 Vue 3 中，可以通过 `app.config.globalProperties` 来挂载全局方法。虽然 Vue 3 更推荐按需引入，但在某些项目中，仍然可以使用全局挂载的方式： ```ts // main.ts import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import axios from &#39;./services/axios&#39;; import { getUserInfo } from &#39;./services/api/user&#39;; const app = createApp(App); // 挂载全局 $http 方法 app.config.globalProperties.$http = axios; // 挂载全局 API 方法 app.config.globalProperties.$api = { user: { getUserInfo, }, }; app.mount(&#39;#app&#39;); ``` ### 在组件中使用封装后的 `axios` 在组件中使用时，可以直接通过 `import` 引入 API 方法，或者通过全局挂载的方式调用： ```vue <script setup> import { onMounted } from &#39;vue&#39;; import { getUserInfo } from &#39;../services/api/user&#39;; onMounted(async () => { try { const res = await getUserInfo(1); console.log(res); } catch (error) { console.error(&#39;获取用户信息失败:&#39;, error); } }); </script> ``` 如果使用了全局挂载，也可以这样写： ```vue <script setup> import { onMounted } from &#39;vue&#39;; onMounted(async () => { try { const res = await this.$api.user.getUserInfo(1); console.log(res); } catch (error) { console.error(&#39;获取用户信息失败:&#39;, error); } }); </script> ``` ### 总结 通过上述方式，可以实现对 `axios` 的二次封装，使请求逻辑更清晰，接口管理更集中，并且可以在多个组件中复用。这种方式结合了模块化思想和 Vue 3 的新特性，适用于中大型项目[^5]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值