在 Javascript 中使用 fetch API 接收和处理 JSON

Question

在我的项目中，当条件不足时，我的 Django 应用会发送 JSON 响应消息。

我使用这个 JsonResponse() 指令，

代码：

data = {
    'is_taken_email': email
}
return JsonResponse(data)

现在我想使用 Javascript 获取 API 接收此 JSON 响应，例如显示警报。

我不知道如何使用 fetch API 来执行此操作。我想写一个 listener 来 waiting 我的 JSON 来自 Django App 的响应。

我试试：

function reqListener() {
  var stack = JSON.parse(data);
  console.log(stack);
}

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;

我想将我的 Django 应用程序中的 JSON 与硬编码的 JSON:
进行比较例如： fetch( 'is_taken_email': email) -> 然后做点什么

或

从我的 Django 应用程序接收 JSON 并且 AJAX 制作它：

success: function(data) { if (data.is_taken_email) { make something; }

提前致谢！

Answer 1

在 javascript 的全局 window 范围内提供了一个获取 API，第一个参数是 API 的 URL，它是Promise-based机制。

简单示例

// url (required)
fetch('URL_OF_YOUR_API', {//options => (optional)
    method: 'get' //Get / POST / ...
}).then(function(response) {
    //response
}).catch(function(err) {
// Called if the server returns any errors
  console.log("Error:"+err);
});

在您的情况下，如果您想接收 JSON 响应

 fetch('YOUR_URL')
    .then(function(response){
         // response is a json string
        return response.json();// convert it to a pure JavaScript object
    })
    .then(function(data){
         //Process Your data  
      if (data.is_taken_email)   
           alert(data);
    })
    .catch(function(err) {
        console.log(err);
      });

基于XMLHttpRequest

使用监听器的例子

function successListener() {  
  var data = JSON.parse(this.responseText);  
  alert("Name is: "+data[0].name);  
}

function failureListener(err) {  
  console.log('Request failed', err);  
}

var request = new XMLHttpRequest();  
request.onload = successListener;  
request.onerror = failureListener;  
request.open('get', 'https://jsonplaceholder.typicode.com/users',true);  
request.send();

Listener as setInterval使用示例（我不确定你是否想做这样的事情，只是分享给你）

var listen = setInterval(function() {

  fetch('https://jsonplaceholder.typicode.com/users')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      if (data[0].name)
        console.log(data[0].name);
    })
    .catch(function(err) {
      console.log(err);
    });

}, 2000);//2 second

我对 Django 不是很熟悉，但我希望这对你有所帮助。

在 Javascript 中使用 fetch API 接收和处理 JSON

Receive and process JSON using fetch API in Javascript

javascript

django

ajax

json

fetch-api