json,XHR,FetchAPI,async,await

json

js->json JSON.stringify

const user = {
        name: "李同学",
        qq: "[e-mail]",
        gender: "female",
        salary: 2000,
         toJSON() {
         return `name=${this.name},qq=${this.qq}`;
         },
      };


jsonStr = JSON.stringify(user, (key, value) => {
        switch (key) {
          case "gender":
            return value === "female" ? "女" : "男";
          case "salary":
            return undefined;
          default:
            return value;
        }
      });

json->js JSON.parse

const siteInfo = `
      {
        "name":"PHP中文网",
        "domain":"https://www.php.cn",
        "email":"[e-mail]",
        "isRecord":true,
        "address":"山东",
        "category":["视频","文章","资源"],
        "lesson":{
          "name":"json",
          "price":4800,
          "content":["js","PHP"]
        }

      }
      `;
site = JSON.parse(siteInfo);

传统XHR

function getUser1(btn) {
      const xhr = new XMLHttpRequest();
      xhr.responseType = "json";
      let url = "http://website.io/users.php";
      xhr.open("GET", url, true);
      xhr.onload = () => {
        console.log(xhr.response);
        render(xhr.response, btn);
      };
      xhr.onerror = () => console.log("Error");
      xhr.send(null);
    }

fetch

 fetch("https://jsonplaceholder.typicode.com/todos/1")
   .then(response => response.json())
   .then(json => console.log(json));

async,await

async function getUser(btn) {
        let url = "https://jsonplaceholder.typicode.com/todos/1";
        const response = await fetch(url);
        const result = await response.json();
        console.log(result);
        let html = `
           <li>用户:${result.userId}</li>
           <li>id:${result.id}</li>
           <li>文章:${result.title}</li>
           <li>completed:${result.completed ? "ture" : "false"}</li>
           `;
        const ul = document.createElement("ul");
        ul.innerHTML = html;
        document.body.append(ul);
      }