原生js 封装get ,post, delete 请求的实例

 更新时间:2017年08月11日 08:19:03   投稿:jingxian  
下面小编就为大家带来一篇原生js 封装get ,post, delete 请求的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

现在的项目中都在用VUE 以及react 等MVC, MVVM  框架。 丢弃了原始的JQ 。不可能为了个$.ajax();而把JQ引进来吧。

在vue1的开发中 提供了 vueResouce, vue2 出来后明确提出了不在更新vueResouce 而提供axios 的方法。

在react 的开发中提供fetch 封装的方法。等等。但在工作与后台的交互中基本都是form表单的形式。于是自己封装了个

POST,GET,DELETE 的请求方式。当然根据不同的公司,不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。

function api(url,opt,methods) {
      return new Promise(function(resove,reject){
        methods = methods || 'POST';
        var xmlHttp = null;
        if (XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
        } else {
          xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        };
        var params = [];
        for (var key in opt){
          if(!!opt[key] || opt[key] === 0){
            params.push(key + '=' + opt[key]);
          }
        };
        var postData = params.join('&');
        if (methods.toUpperCase() === 'POST') {
          xmlHttp.open('POST', url, true);
          xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
          xmlHttp.send(postData);
        }else if (methods.toUpperCase() === 'GET') {
          xmlHttp.open('GET', url + '?' + postData, true);
          xmlHttp.send(null);
        }else if(methods.toUpperCase() === 'DELETE'){
          xmlHttp.open('DELETE', url + '?' + postData, true);
          xmlHttp.send(null);
        }
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            resove(JSON.parse(xmlHttp.responseText));
          }
        };
      });
    }
    export default api;

以上这篇原生js 封装get ,post, delete 请求的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript常考手写题之柯里化与数组扁平化的实现

    JavaScript常考手写题之柯里化与数组扁平化的实现

    这篇文章主要为大家详细介绍了JavaScript常考手写题中柯里化与数组扁平化、数组去重的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12
  • DataTables添加额外的查询参数和删除columns等无用参数实例

    DataTables添加额外的查询参数和删除columns等无用参数实例

    下面小编就为大家带来一篇DataTables添加额外的查询参数和删除columns等无用参数实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • js实现购物网站放大镜功能

    js实现购物网站放大镜功能

    这篇文章主要为大家详细介绍了js实现购物网站放大镜功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 浅谈js继承的实现及公有、私有、静态方法的书写

    浅谈js继承的实现及公有、私有、静态方法的书写

    下面小编就为大家带来一篇浅谈js继承的实现及公有、私有、静态方法的书写。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS运行耗时操作的延时显示方法

    JS运行耗时操作的延时显示方法

    今天用JS允许一个ActiveX,挺耗时的,想在允许时提示用户正在允许,而不至于漏斗在那里
    2010-11-11
  • 微信小程序实现页面下拉刷新和上拉加载功能详解

    微信小程序实现页面下拉刷新和上拉加载功能详解

    这篇文章主要介绍了微信小程序实现页面下拉刷新和上拉加载功能,结合实例形式分析了微信小程序页面下拉刷新和上拉加载相关事件监听与功能实现操作技巧,需要的朋友可以参考下
    2018-12-12
  • javascript实现fetch请求返回的统一拦截

    javascript实现fetch请求返回的统一拦截

    这篇文章主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 简介JavaScript错误处理机制

    简介JavaScript错误处理机制

    这篇文章主要介绍了JavaScript错误处理机制的相关资料,文中讲解非常细致,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-08-08
  • JS使用面向对象技术实现的tab选项卡效果示例

    JS使用面向对象技术实现的tab选项卡效果示例

    这篇文章主要介绍了JS使用面向对象技术实现的tab选项卡效果,结合具体实例形式分析了js面向对象技术与tab选项卡功能的具体实现技巧,需要的朋友可以参考下
    2017-02-02
  • 基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    我们知道在JavaScript中定义类的原型方式,而原型链扩展了这种方式,以一种有趣的方式实现继承机制。prototype 对象是个模板,要实例化的对象都以这个模板为基础。总而言之,prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制
    2013-05-05

最新评论