原生Ajax写法和ES6中Promise结合Ajax写法

亦凉 2022-04-13 09:48 269阅读 0赞

### 原生AJAX ###

var Ajax={
      get: function(url, fn) {
        // XMLHttpRequest对象用于在后台与服务器交换数据   
        var xhr = new XMLHttpRequest();            
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
          // readyState == 4说明请求已完成
          if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
            // 从服务器获得数据 
            fn.call(this, xhr.responseText);  
          }
        };
        xhr.send();
      },
      // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
      post: function (url, data, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url, true);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
            fn.call(this, xhr.responseText);
          }
        };
        xhr.send(data);
      }
    }

### ES6中Promise结合Ajax写法 ###

const ajaxPromise =  param => {
      return new Promise((resovle, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open(param.type || "get", param.url, true);
        xhr.send(param.data || null);
     
        xhr.onreadystatechange = () => {
         var DONE = 4; // readyState 4 代表已向服务器发送请求
         var OK = 200; // status 200 代表服务器返回成功
         if(xhr.readyState === DONE){
          if(xhr.status === OK){
            resovle(JSON.parse(xhr.responseText));
          } else{
            reject(JSON.parse(xhr.responseText));
          }
         }
        }
      })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关 es6 多个promise技巧写法

在 ECMAScript 6 中，你可以使用 Promise.all 方法来处理多个 Promise 对象。 Promise.all 方法接受一个 Promise 对象数组作

怼烎@/ 2024年03月26日 10:06/ 0 赞/ 114 阅读

相关 ajax原生js写法

[参考][Link 1] 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

柔光的暖阳◎/ 2022年09月21日 11:43/ 0 赞/ 218 阅读

相关 js中原生ajax及其兼容性写法

ajax兼容性写法 var xhr; if(window.XMLHttpRequest) { xhr = new XMLHttpReque

女爷i/ 2022年09月09日 00:15/ 0 赞/ 263 阅读

相关原生Ajax写法和ES6中Promise结合Ajax写法

原生AJAX var Ajax={ get: function(url, fn) { // XMLHttpRequest对象用于在后台

亦凉/ 2022年04月13日 09:48/ 0 赞/ 270 阅读

相关两种Ajax写法

Ajax:(Asynchronous Javascript And XML)简称为异步的js和xml js中有两种写法： //原生js写法 functio

﹏ヽ暗。殇╰゛Y/ 2022年03月28日 15:11/ 0 赞/ 321 阅读

相关 jquery中ajax写法

var data = { "level": 1, "name": dname, "brandCode": dcode, "mci

红太狼/ 2022年02月28日 08:06/ 0 赞/ 229 阅读

相关 es6 Promise封装ajax

利用Promis 做一个简单的数据请求封装。 function requestP(options = {}) { const { ur

缺乏、安全感/ 2022年02月17日 08:47/ 0 赞/ 316 阅读

相关 Ajax 常用写法&原生代码

jQuery ajax 介绍及基本语法作为JavaScript一个类库，必然也会有响应的ajax的功能，jQuery认为原生ajax过于复杂，所以进行了一次封装（jQu

深碍√TFBOYSˉ_/ 2022年02月14日 18:44/ 0 赞/ 310 阅读

相关 jQuery ajax 的 Promise 风格写法

> ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返

雨点打透心脏的1/2处/ 2022年01月06日 04:17/ 0 赞/ 297 阅读

相关 Ajax ajax原生对象-xhr对象兼容性写法

兼容性问题获得xhr对象非ie：new XMLHttpRequest() ie:new ActiveXObject()

怼烎@/ 2021年07月24日 23:13/ 0 赞/ 479 阅读