什么是Jquery的$.getJSON的vanilla JS版本

What is the vanilla JS version of Jquery's $.getJSON

本文关键字：vanilla JS 版本 getJSON Jquery 什么      更新时间：2023-09-26

我需要构建一个项目才能进入我正在申请的JS训练营。 他们告诉我我只能使用普通的JS，特别是不允许使用框架和Jquery。 到目前为止，当我想从 api 检索 JSON 文件时，我会说 

$.getJSON(url, functionToPassJsonFileTo)

对于 JSON 调用和 

$.getJSON(url + "&callback?", functionToPassJsonPFileTo)

对于 JSONP 调用。 我这个月刚开始编程，所以请记住，我不知道JSON或JSONP之间的区别，也不知道它们与ajax这个东西有什么关系。 请解释一下我将如何获得上述 2 行在 Vanilla Javascript 中实现的目标。 谢谢。

所以澄清一下， 

function jsonp(uri){
    return new Promise(function(resolve, reject){
        var id = '_' + Math.round(10000 * Math.random())
        var callbackName = 'jsonp_callback_' + id
        window[callbackName] = function(data){
            delete window[callbackName]
            var ele = document.getElementById(id)
            ele.parentNode.removeChild(ele)
            resolve(data)
        }
        var src = uri + '&callback=' + callbackName
        var script = document.createElement('script')
        script.src = src
        script.id = id
        script.addEventListener('error', reject)
        (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script)
    })
}

会是 JSONP 等价物吗？

这是 $.getJSON 的 Vanilla JS 版本：

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    // Success!
    var data = JSON.parse(request.responseText);
  } else {
    // We reached our target server, but it returned an error
  }
};
request.onerror = function() {
  // There was a connection error of some sort
};
request.send();

参考： http://youmightnotneedjquery.com/

对于JSONP SO已经在这里有了答案

使用$.getJSON您可以使用 一个 GET HTTP 请求。

ES6 具有 Fetch API，它提供了一种全局fetch()方法，提供了一种简单、合乎逻辑的方式来通过网络异步获取资源。

这比XMLHttpRequest容易.

fetch(url) // Call the fetch function passing the url of the API as a parameter
  .then(res => res.json())
  .then(function (res) {
    console.log(res)
    // Your code for handling the data you get from the API
  })
  .catch(function() {
    // This is where you run code if the server returns any errors
  });

这是Ajax的香草JS版本

var $ajax = (function(){
    var that = {};
    that.send = function(url, options) {
        var on_success = options.onSuccess || function(){},
            on_error   = options.onError   || function(){},
            on_timeout = options.onTimeout || function(){},
            timeout    = options.timeout   || 10000; // ms
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //console.log('responseText:' + xmlhttp.responseText);
                try {
                    var data = JSON.parse(xmlhttp.responseText);
                } catch(err) {
                    console.log(err.message + " in " + xmlhttp.responseText);
                    return;
                }
                on_success(data);
            }else{
                if(xmlhttp.readyState == 4){
                    on_error();
                }
            }
        };
        xmlhttp.timeout = timeout;
        xmlhttp.ontimeout = function () { 
            on_timeout();
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }
    return that;
})();

例：

$ajax.send("someUrl.com", {
    onSuccess: function(data){
        console.log("success",data);
    },
    onError: function(){
        console.log("Error");
    },
    onTimeout: function(){
        console.log("Timeout");
    },
    timeout: 10000
});

我很欣赏上面的 $.getJSON 的香草 js 等效物但我得出完全相同的观点。我实际上试图摆脱我无法以任何方式掌握的 jquery。在这两种情况下，我最终遇到的是 JSON 请求的异步性质。

我试图实现的是从异步调用中提取一个变量

function shorten(url){
var request = new XMLHttpRequest();
bitly="http://api.bitly.com/v3/shorten?&apiKey=mykey&login=mylogin&longURL=";
request.open('GET', bitly+url, true);
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
  var data = JSON.parse(request.responseText).data.url;
  alert ("1:"+data); //alerts fine from within 
  // return data is helpless
  } 
};
request.onerror = function() {
   // There was a connection error of some sort
   return url;
};
request.send();
}

现在函数已定义并工作

shorten("anyvalidURL"); // alerts fine from within "1: [bit.ly url]"

但是我如何分配数据值（来自异步调用）以便在调用函数后能够在我的 JavaScript 中使用它

比如 

 document.write("My tiny is : "+data);
相关文章：