前言

在开发Vue项目的时候，我们一般情况下是使用axios这个HTTP库请求后台的接口，每个的请求代码如下

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

以上代码虽然并不复杂，但是当你请求非常多接口时，就会发现写了十分多的重复代码，并且不太利于维护。下面我们来封装一个全局的HTTP请求，并统一管理后台接口。

开发步骤一：使用Promise代替回调函数封装HTTP请求

import axios from "axios";
import { Toast } from "mint-ui";
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 == 0) {
        resolve(res);
      } else if (res.code == -1) {
        resolve(res);
      }
    }).catch(() => {
      reject();
      Toast({
        message: "发生错误，请检查！",
        position: "middle",
        duration: 2000
      });
    })
  }
};
export { HttpRequest };

开发步骤二：统一管理API

import { HttpRequest } from "../utils/http";
let Doctor = {
  // 关注医生
  followDoctor: function(datas) {
    return HttpRequest.getRequest({
      method: "POST",
      url: "API地址",
      data: datas
    });
  },
  // 获取评价标签
  getElvaluateTag: function(datas) {
    return HttpRequest.getRequest({
      method: "GET",
      url: "API地址",
      data: datas
    });
  }
};
export { Doctor };

开发步骤三：调用API

import { Doctor } from "@/models/doctor.js";

followDoctor() {
  let datas = {
    current: this.current,
    size: this.size
  };
  Doctor.followDoctor(datas).then(res => {
    console.log(res)
  });
},

getElvaluateTag() {
  let datas = {
    userId: this.userId
  };
  Doctor.getElvaluateTag(datas).then(res => {
    console.log(res)
  });
},

尾声

通过以上的封装，是不是就能够节省十分多的力气以及提高项目的维护性呢？