vue - request模块封装 - axios封装（请求和响应拦截器）

最新推荐文章于 2024-06-11 07:54:58 发布
最新推荐文章于 2024-06-11 07:54:58 发布
阅读量565 收藏 2
点赞数 3
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/133075192
版权
本文介绍了如何在Vue.js项目中封装axios请求模块，包括设置基地址和配置请求响应拦截器。通过创建自定义axios实例，便于在项目中统一管理和使用HTTP请求。
摘要由CSDN通过智能技术生成

文章目录

request模块 - axios封装

基地址：http://cba.itlike.com/public/index.php?s=/api/

我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

1、封装request模块

目标：将 axios 请求方法，封装到 request 模块

  1. 安装 axios
npm i axios

  1. 新建 utils/request.js 封装 axios 模块

    利用 axios.create 创建一个自定义的 axios 来使用

    http://www.axios-js.com/zh-cn/docs/#axios-create-config

/* 封装axios用于发送请求 */
import axios from 'axios'

// 创建一个新的axios实例
了解本专栏 订阅专栏 解锁全文 超级会员免费看
脱发使我稳重
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
(springboot-vue) 前后端交互实现
qq_55054495的博客
08-23 3231
一个例子 在vue写的前端创建用户 发送请求 后端springboot实现新用户的创建
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
10-17
主要介绍了解决VUE在封装了Axios后手动刷新页面拦截器无效的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
VueRequest——管理请求状态库
qq_34082921的博客
11-11 2409
VueRequest——开发文档VueReques——GitHub地址在以往的业务项目中，我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍，这是一项重复的工作，还需要确保团队的一致性。VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置，可以省去那些繁琐的任务，专注于业务核心的开发。提示：以下是本篇文章正文内容，下面案例可供参考。
标题：VueRequest - 轻松管理你的API请求，提高开发效率
gitblog_00072的博客
05-15 446
标题：VueRequest - 轻松管理你的API请求，提高开发效率 项目地址:https://gitcode.com/AttoJS/vue-request 在现代Web开发中，处理API请求的状态管理往往是项目中的一个关键但繁琐的部分。为了简化这一过程，我们向您推荐VueRequest——一个专为Vue 2和3设计的库，它让请求管理变得简单、高效，并且包含了SWR、轮询、错误重试、缓存等一系列...
vue的封装request接口(详细)
热门推荐
小小雨伞的博客
11-02 1万+
由于一般使用axios,但是每个组件使用的话,每次都要调用axios还要写地址,如果想更改服务器的地址的话,就要一个组件一个组件的更改 所以这就是封装的好处 首先引入axios的依赖 创建request.js import axios from 'axios' // create an axios instance const service = axios.create({ // baseURL: 'http://chenyp.top:8008', // url = base url + reque
VUE-Request接口封装
liqingjiea的博客
10-29 483
VUE-Request接口封装。
vue request封装
Y丶小琪
08-31 1144
import axios from 'axios' import { Message } from 'element-ui' import store from '@/store' let baseURL let wsBaseURL if (process.env.NODE_ENV === 'development') { baseURL = '' } else { // baseURL = 'http://odhy.commu.gmtech.top' baseURL = `${window.
vue封装request
qq_49210750的博客
10-10 1127
vue封装request
Vue封装Axios请求和拦截器的步骤
10-14
为了实现请求和响应的拦截器，我们使用`axiosService.interceptors.request.use()`和`axiosService.interceptors.response.use()`方法。请求拦截器通常用于在发送请求前处理参数，如添加令牌；响应拦截器则用于在...
vue+ts下对axios的封装实现
10-15
本文将详细介绍如何在Vue+TS项目中对axios进行封装，包括设置拦截器来处理请求和响应。 首先，确保你已经安装了axios。在终端中运行以下命令来安装它： ```bash npm install axios -D ``` 接下来，我们将创建一个...
详解给Vue2路由导航钩子和axios拦截器做个封装
11-30
axios提供请求拦截器（request interceptors）和响应拦截器（response interceptors），可以用于统一处理请求前的数据序列化以及响应后的错误处理。在`getData.js`文件中，我们可以这样设置： ```javascript import...
Vue封装request请求
yyclassmvp的博客
03-14 1205
【代码】Vue封装request请求。
vue请求类的封装，基于jQuery版本和Axios，两个版本
一米阳光
09-30 2824
vue中基于jQuery请求类的封装：   /** * 该插件基于JQuery的基础封装的，使用的时请自配JQuery * 使用方法:在页面import该JS文件 * XXX.post({··parameter··}).then((response) =>{ success }) */ import Vue from 'vue' import store from '.....
【Vue】request模块 - axios封装
最新发布
qq_39921135的博客
06-11 209
接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080。基地址：http://cba.itlike.com/public/index.php?演示地址：http://cba.itlike.com/public/mweb/#/利用 axios.create 创建一个自定义的 axios 来使用。一般项目开发中, 都会对 axios 进行基本的。, 一般都会对 axios 进行。
vue请求的封装
bpluoxong的博客
06-09 1072
首先是对于请求的拦截和处理，我一般是在utils里建立js进行封装。在页面使用时建议使用异步封装调用。然后就可以封装一些简单的请求。在main.js绑定即可使用。
vue封装 request.js
weixin_44305462的博客
04-13 2744
import axios from 'axios' import { VueAxios } from './axios' import notification from 'ant-design-vue/es/notification' import store from '@/store' import router from '../router' import { setToken, getToken, getRefreshToken, setRefreshToken } from
request接口封装Vue
CC酱写前端的博客
02-02 226
request接口封装Vue
vue ---request
weixin_42029487的博客
12-04 6430
import axios from 'axios' /* eslint-disable */ import { Loading,Message } from 'element-ui'; var debug=true let loadingInstance let needLoadingRequestCount = 0 let cookieId='' // 请求拦截器 // axios.d...
vue项目中如何封装axios的请求拦截和响应拦截步骤
05-14
在 Vue 项目中，可以通过以下步骤封装 axios 的请求拦截和响应拦截： 1. 安装 axios ``` npm install axios --save ``` 2. 创建一个 axios 实例 在项目中，一般会有多个接口请求，为了方便管理和配置，可以创建一个 axios 实例来处理所有的请求。在 `src` 目录下新建一个 `api` 文件夹，然后在该文件夹下新建一个 `http.js` 文件，输入以下代码： ```JavaScript import axios from 'axios' const http = axios.create({ baseURL: process.env.VUE_APP_BASE_URL, timeout: 5000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) export default http ``` 上述代码中，我们创建了一个名为 `http` 的 axios 实例，并设置了一些默认配置，如请求的基础 URL、请求超时时间、请求头等。 3. 设置请求拦截器 请求拦截器可以在请求发送前做一些处理，如添加请求头、添加 loading 等。在 `http.js` 文件中添加以下代码： ```JavaScript http.interceptors.request.use(config => { // 添加 loading // ... // 添加请求头 // ... return config }, error => { return Promise.reject(error) }) ``` 4. 设置响应拦截器 响应拦截器可以在接收到响应后做一些处理，如判断响应状态码、关闭 loading 等。在 `http.js` 文件中添加以下代码： ```JavaScript http.interceptors.response.use(response => { // 判断响应状态码 if (response.status === 200) { return Promise.resolve(response.data) } else { return Promise.reject(new Error(response.statusText)) } // 关闭 loading // ... }, error => { return Promise.reject(error) }) ``` 5. 通过 `http` 实例发送请求 在需要发送请求的组件中，可以通过 `http` 实例发送请求。例如，获取用户列表的代码如下所示： ```JavaScript import http from '@/api/http' export default { data() { return { userList: [] } }, mounted() { http.get('/user/list').then(res => { this.userList = res.data }) } } ``` 上述代码中，我们通过 `http` 实例发送了一个 GET 请求，请求的 URL 为 `/user/list`。请求成功后，将响应数据赋值给 `userList`。 通过以上步骤，我们就成功地封装了 axios 的请求拦截和响应拦截。在实际开发中，我们还可以根据项目需求进行更加复杂的封装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值