原生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 请求的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScrpt的面向对象全面解析

    JavaScrpt的面向对象全面解析

    javascript面向对象知识很广泛,想深入理解需要花费一些时间,本文给大家介绍了js面向对象的创建及相关属性介绍,感兴趣的小伙伴一起学习吧
    2017-05-05
  • js 获取扫码枪输入数据的方法

    js 获取扫码枪输入数据的方法

    这篇文章主要介绍了js 获取扫码枪输入数据的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 原生JS下拉加载插件分享

    原生JS下拉加载插件分享

    本文主要分享了原生JS下拉加载插件的实现代码。具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

    这篇文章主要介绍了bootstrap模态框跳转到当前模板页面,框消失了,而背景依然存在问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript判断是否为数字的多种方法小结

    JavaScript判断是否为数字的多种方法小结

    这篇文章主要介绍了JavaScript判断是否为数字的多种方法小结,本文给大家分享三种方法,结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • JavaScript前端实现快照的示例代码

    JavaScript前端实现快照的示例代码

    snapshot 翻译为快照,用于直观获取页面在某个运行时的状态,本文主要为大家详细介绍 snapshot 工具实现的原理,以及其在项目中的使用,需要的可以参考下
    2023-11-11
  • JS控制表格实现一条光线流动分割行的方法

    JS控制表格实现一条光线流动分割行的方法

    这篇文章主要介绍了JS控制表格实现一条光线流动分割行的方法,实例分析了javascript操作table表格元素的技巧,需要的朋友可以参考下
    2015-03-03
  • JavaScript轻松创建级联函数的方法示例

    JavaScript轻松创建级联函数的方法示例

    级联函数也叫链式函数,方法链一般适合对一个对象进行连续操作 (集中在一句代码)。一定程度上可以减少代码量,缺点是它占用了 函数的返回值。下面这篇文章主要给大家介绍了利用JavaScript如何轻松创建级联函数的方法示例,需要的朋友可以参考借鉴。
    2017-02-02
  • Javascript和Java获取各种form表单信息的简单实例

    Javascript和Java获取各种form表单信息的简单实例

    本篇文章主要是对Javascript和Java获取各种form表单信息的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • BootStrap Fileinput的使用教程

    BootStrap Fileinput的使用教程

    bootstrap-fileinput是基于bootstrap的上传控件。此控件在网上可以找到很多例子,接下来通过本文给大家分享bootstrap fileinput的使用教程,非常不错,感兴趣的朋友一起看看吧
    2016-12-12

最新评论