vue 项目封装 axios 的 HTTP 请求

在介绍如何封装 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