Vue中封装Ajax公共方法的实现与使用

作者：模板散步

时间：2026-10-22

本文介绍在Vue项目中如何基于ES6语法封装通用的Ajax请求方法，旨在减少代码冗余。通过定义统一的ajaxData函数，支持POST/GET等多种请求类型，并利用Promise机制处理异步结果。文章提供了具体的配置参数说明及调用示例，帮助开发者快速集成网络请求功能。

文章目录

Vue中封装Ajax公共方法的实现与使用

为降低代码重复率，计划抽取用于发起Ajax请求的通用函数，以便团队其他成员直接调用。

该功能采用ES6语法规范进行编写。


/**
  * @param type 请求类型，分为POST/GET
  * @param url 请求url
  * @param contentType
  * @param headers
  * @param data
  * @returns {Promise<any>}
  */
 ajaxData: function (type, url, contentType, headers, data) {
  return new Promise(function(resolve) {
   $.ajax({
    type: type,
    url: url,
    data: data,
    timeout: 30000, //超时时间：10秒
    headers: headers,
    success: function(data) {
     resolve(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
     resolve(XMLHttpRequest);
    }
   });
  });
 }

请求结果通过回调函数形式返回。

具体测试代码示例如下：


getAjaxDataMethod: function () {
    const url = "";
    const type = "POST";
    const contentType = "application/json";
    const headers = {};
    const data = {};
    Api.ajaxData(type, url, contentType, headers, data).then(function (res) {
     console.log(res);
    }).catch(function (err) {
     console.log(err);
    })
   }

经测试，功能运行正常。

以上就是Vue封装Ajax公共方法的详细介绍，供各位参考，欢迎支持。