vue 项目封装 axios 的 HTTP 请求

春日安然

于 2021-01-19 11:02:37 发布

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue封装 axios 超时退出 http请求

本文链接：https://blog.csdn.net/j1231230/article/details/112799700

版权

本文介绍了在Vue项目中如何通过Promise封装axios的HTTP请求，以解决重复代码和便于维护的问题。首先在src/util/http.js创建HTTP请求封装，接着在src/service/auth.js统一管理权限相关接口，最后展示在项目中如何调用这些API。通过封装，可以方便地实现如超时退出等统一处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在介绍如何封装 axios 的 http 请求之前，我们先来了解下什么是 axios。

axios 是通过 promise 实现对 ajax 技术 的一种封装，就像 jQuery 实现 ajax 封装一样。

简单来说，ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装。

平时开发 vue 项目时，不同模块都会使用 axios 请求后台的接口，代码如下：

this.$axios({
   
  method: "POST",
  url: "接口地址",
  params: {
   
    参数名1:"参数值1",
    参数名2:"参数值2"
  }
}).then(res => {
   
  // 请求成功
}).catch(error=>{
   
  // 请求失败
});

当请求的接口越来越多时，就会发现写了很多的重复代码，不太利于维护。如果需要使用统一的过滤规则，比如实现超时退出，就需要修改每一个请求的代码，非常麻烦。

因此，我们可以封装一个全局的HTTP请求，来统一管理后台接口，封装步骤如下：

一. 使用 Promise 封装 HTTP 请求

首先在 src 的 util 文件夹下新建 http.js，使用 Promise 代替回调函数封装 HTTP 请求：
在这里插入图片描述
http.js 代码

import axios from "axios";
var HttpRequest = {
   
  getRequest({
    url, data = {
   }, met

最低0.47元/天解锁文章