为了账号安全,请及时绑定邮箱和手机立即绑定

Vue项目封装一个HTTP请求

前言

在开发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)
  });
},

尾声

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

点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
114
获赞与收藏
415

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消