基于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公共方法(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于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) {

  • 基于原生ajax与封装的ajax使用方法(详解)

    基于原生ajax与封装的ajax使用方法(详解)

    当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo

  • vue学习笔记五：在vue项目里面使用引入公共方法详解

    今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台

  • 基于ScheduledExecutorService的两种方法(详解)

    开发中,往往遇到另起线程执行其他代码的情况,用java定时任务接口ScheduledExecutorService来实现. ScheduledExecutorService是基于线程池设计的定时任务类,每个调度任务都会分配到线程池中的一个线程去执行,也就是说,任务是并发执行,互不影响. 注意,只有当调度任务来的时候,ScheduledExecutorService才会真正启动一个线程,其余时间ScheduledExecutorService都是处于轮询任务的状态. 1.scheduleAtFix

  • 基于HashMap遍历和使用方法(详解)

    基于HashMap遍历和使用方法(详解)

    map的几种遍历方式: Map< String, String> map = new HashMap<>(); map.put("aa", "@sohu.com"); map.put("bb","@163.com"); map.put("cc", "@sina.com"); System.out.println("普通的遍历方法,通过Map.keySet

  • 基于laravel Request的所有方法详解

    获取请求的实例 通过 Facade Request 这个 facade 可以让我们得到绑定在容器里的当前这个请求.比如: $name = Request::input('name'); 注意,如果你在一个命名空间里,你需要在类文件的顶部使用 use Request; 这条声明来导入 Request 这个 facade . 通过依赖注入 要通过依赖注入得到当前 HTTP 请求的实例,需要在你的控制器构造函数或者方法里 type-hint 类.当前请求的这个实例会被 Service Containe

  • .NET 6实现基于JWT的Identity功能方法详解

    .NET 6实现基于JWT的Identity功能方法详解

    目录 需求 目标 原理与思路 实现 引入Identity组件 添加认证服务 使用JWT认证和定义授权方式 引入认证授权中间件 添加JWT配置 增加认证用户Model 实现认证服务CreateToken方法 添加认证接口 保护API资源 验证 验证1: 验证直接访问创建TodoList接口 验证2: 获取Token 验证3: 携带Token访问创建TodoList接口 验证4: 更换Policy 一点扩展 总结 参考资料 需求 在.NET Web API开发中还有一个很重要的需求是关于身份认证和授

  • Vue websocket封装实现方法详解

    目录 1.封装的ws.js文件 2.使用方法 1.封装的ws.js文件 let global_callback = null let socket = '' // 存储 WebSocket 连接. let timeoutObj = null // 心跳定时器 let serverTimoutObj = null // 服务超时定时关闭 let lockReconnect = false // 是否真正建立了连接 let timeoutnum = null // 重新连接的定时器, 没连接上会一直

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

  • Django基于ORM操作数据库的方法详解

    Django基于ORM操作数据库的方法详解

    本文实例讲述了Django基于ORM操作数据库的方法.分享给大家供大家参考,具体如下: 1.配置数据库 vim settings #HelloWorld/HelloWorld目录下 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', #mysql数据库中第一个库test 'NAME': 'test', 'USER': 'root', 'PASSWORD': '123456', 'HOST':'127.0.0.1', '

随机推荐