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 = {}, method = "GET" }) {
    return new Promise((resolve, reject) => {
      this._getRequest(url, resolve, reject, data, method);
    });
  },
  _getRequest: function(url, resolve, reject, data = {}, method = "GET") {
    let format = method.toLocaleLowerCase() ==='get'?'params':'data';
    axios({
      url: url,
      method: method,
      [format]: data,
      header: {
        "content-type": "application/json"
      }
    }).then(res => {
      if (res.code == 200) {
        resolve(res);
      } else if (res.code == 403) {
      	// 如果接口返回 403，进行登录超时处理
      }
    }).catch(() => {
      // 异常处理
      reject();
    })
  }
};
export { HttpRequest };

二. 创建统一管理 API

在 src 的 service 文件夹下新建 auth.js，用于统一管理项目中的权限相关请求：

auth.js 代码

import { HttpRequest } from "../util/http";

let Auth = {
  // 判断用户名称重复
  checkUsername: function(data) {
    return HttpRequest.getRequest({
      method: "GET",
      url: "/api/user/checkUsername",
      data: data
    });
  },
  // 用户注册
  register: function(data) {
    return HttpRequest.getRequest({
      method: "POST",
      url: "/api/user/register",
      data: data
    });
  },
  // 获取用户信息
  getUserInfo: function(data) {
    return HttpRequest.getRequest({
      method: "GET",
      url: "/api/auth/user/getUserInfo",
      data: data
    });
  },
  // 编辑用户信息
  editUser: function(data) {
    return HttpRequest.getRequest({
      method: "POST",
      url: "/api/auth/user/editUser",
      data: data
    });
  }
};
export {Auth};

三. 调用API

在需要进行权限请求的地方调用对应的API：

导入 API ：

import { Auth } from "../service/auth.js";

在方法中实现：

let data = {
    username: this.username
};
Auth.checkUsername(data).then(response = > {
    if (response.data.code == 200) {
        // 用户名重复的对应处理
    } else {
        // 未重复的对应处理
    }
});

欢迎关注我的公众号，用讲故事的方式学技术。

这里有脑洞大开的奇葩故事，也有温暖文艺的心灵感悟。

技术知识，也可以很有趣。