关于typeScript封装ajax

一，简介

我之前的博客已经介绍了原生的ajax和jquery封装ajax，这篇博客介绍下新颖的技术typeScript封装下ajax。

二，使用

对比jquery的封装：

  $.ajax({
        url : 'http://102.37.175.185:3000/index',
        type : 'GET',
        data : {
            uname : uname
        },
        dataType : 'json'
        })

对于jquery封装的四个属性就是url，type，data，dataType。
所以对于typeScript首先封装的就是这四个了
首先先声明一个接口，存储着四个属性

 interface Config{
     type : string;

     url : string;
     
     //可写可不写
     data?: string;

     dataType : string;
 }            
     

然后我通过声明一个函数，接受接口Config里的属性

function ajax(config : Config){
     var xhr = new XMLHttpRequest();

     xhr.open(config.type,config.url,true);

     xhr.send(config.data);

     xhr.onreadystatechange = function(){
         if(xhr.readyState == 4 && xhr.status == 200){
             console.log("成功");
         }
     }
 }

基本和jquery封装的原理一样

接下来就是调用接口传入数据了

 ajax({
     type : 'GET',
     data : 'name = zhang',
     url : 'http://102.37.175.185:3000/index',
     data : 'json'

 })

这个接口通过服务器后台传输过来，通过调用获得数据

基本就是这些，和jquery封装类似，只是相对于jquery更前沿一些，毕竟技术都是更新换代的。

关于封装typeScript的封装ajax就这些，相比之下是不是更好用些！！！