欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-14 19:19:26
现在的项目中都在用vue 以及react 等mvc, mvvm  框架。 丢弃了原始的jq 。不可能为了个$.ajax();而把jq引进来吧。 在vue1的开发...

现在的项目中都在用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 请求的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。