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

# get # post # put # delete # 原生 JS Ajax # GET和POST 请求实例代码 # 浅谈JS原生Ajax # GET和POST # 给大家 # 都是 # 不可能 # 都在 # 但在 # 提出了 # 希望能 # 来吧 # 这篇 # 表单 # 装了 # 小编 # 大家多多 # 而把 # background # style # ccffcc # color # parse # form

返回目录在线咨询

上一篇：关键词在网站结构中的重要性是什么_SEO优化教程
下一篇：服务器配置如何优化才能提升网站下载速度？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求