I 术语

1.1 术语：箭头函数

匿名函数: 因为它没有名字

//Longhand
function add(num1, num2) {
   return num1 + num2;
}

匿名函数还有另一种我们称之为箭头函数的写法，箭头函数使用() =>代替 function ()：

//Shorthand 箭头函数
const add = (num1, num2) => num1 + num2;

1.2 术语：回调函数和Promise链

回调函数是一个被传递到另一个函数中的会在适当的时候被调用的函数，如事件处理程序就是一种特殊类型的回调函数。

由于嵌套回调导致处理错误变得非常困难，代码也更难阅读和调试，所以JavaScript 中的异步编程是基于 Promise实现。

Promise是一个由异步函数返回的可以向我们指示当前操作所处的状态的对象。在基于 Promise 的 API 中，异步函数会启动操作并返回 Promise 对象。然后你可以将处理函数附加到 Promise 对象上，当操作完成时（成功或失败），这些处理函数将被执行。

在 Promise 返回给调用者的时候，操作往往还没有完成，但 Promise 对象可以让我们操作最终完成时对其进行处理（无论成功还是失败）。

例子：fetch() 一个基于 Promise 的、用于替代 XMLHttpRequest 的方法。

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

console.log(fetchPromise);
//将一个处理函数传递给 Promise 的 then() 方法。
fetchPromise.then( response => {
  console.log(`已收到响应：${response.status}`);
});

console.log("已发送请求……");

"pending" 状态意味着操作仍在进行中。

Promise 链：链式使用 Promise

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

fetchPromise
  .then( response => {
    return response.json();//json() 也是异步的，response.json() 返回的是 Promise对象
  })
  .then( json => {
    console.log(json[0].name);
  });

Promise 对象提供了一个 catch() 方法来支持错误处理。当异步操作成功时，传递给 then() 的处理函数被调用，而当异步操作失败时，传递给 catch() 的处理函数被调用。

如果将 catch() 添加到 Promise 链的末尾，它就可以在任何异步函数失败时被调用。于是，我们就可以将一个操作实现为几个连续的异步函数调用，并在一个地方处理所有错误。

const fetchPromise = fetch('bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

fetchPromise
  .then( response => {
    if (!response.ok) {
      throw new Error(`HTTP 请求错误：${response.status}`);
    }
    return response.json();
  })
  .then( json => {
    console.log(json[0].name);
  })
  .catch( error => {
    console.error(`无法获取产品列表：${error}`);
  });

1.3 JSON（JavaScript Object Notation)

是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

JSON用于在网站上表示和传输数据

////通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。
//创建一个新的 XMLHttpRequest 并监听它的 loadend 事件

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();
//以事件处理程序属性形式关联事件处理器
request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
}
//通过DOM Level 2 Events 函数 addEventListener()关联事件处理器
  xhr.addEventListener('loadend', () => {
    log.textContent = `${log.textContent}完成！状态码：${xhr.status}`;
  });

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

//JSON 格式创建一个对象
   var oo = {
        name:"hello",
        age:123,
        getName:function(){
       return oo.name;
            }
       
    }

JSON 和 JS 对象互转：利用浏览器内建的 JSON进行转换数据

//parse(): 以文本字符串形式接受 JSON 对象作为参数，并返回相应的对象。
var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
//stringify(): 接收一个对象作为参数，返回一个对应的 JSON 字符串。
var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

深拷贝多级对象

//深拷贝多级对象
const cloneObj = JSON.parse(JSON.stringify(obj));//JSON.stringify 对象的时候，包含 function, undefined or NaN 值的属性会从对象中移除。
//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};
//————————————————
//版权声明：本文为CSDN博主「iOS逆向」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
//原文链接：https://blog.csdn.net/z929118967/article/details/126142071

II Ajax（Asynchronous JavaScript and XML）

Ajax是一种在2005年由Google推广开来的编程模式，可以创建更好、更快以及更友好的web应用程序。

在这里插入图片描述 Asynchronous JavaScript and XML基于javascript和HTTP请求,以异步地方式实现局部HTML的刷新。

2.1 从服务器获取数据

XMLHttpRequest （通常缩写为 XHR）现在是一个相当古老的技术 - 它是在 20 世纪 90 年代后期由微软发明的，并且已经在相当长的时间内跨浏览器进行了标准化。

因为微软 Edge 浏览器的受宠, IE 已经没人管了

let request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'text';

request.onload = function() {
  poemDisplay.textContent = request.response;
};

request.send();

Fetch API 基本上是 XHR 的一个现代替代品——它是最近在浏览器中引入的，它使异步 HTTP 请求在 JavaScript 中更容易实现

fetch(url).then(function(response) {
  response.text().then(function(text) {
    poemDisplay.textContent = text;
  });
});

2.2 缓存问题

如果是get方式请求,浏览器会将请求的数据缓存起来，如果下次访问的地址没变，浏览器就不会发送真正的请求，会将缓存的数据显示给用户。

解决方式：

可以在地址后面加上一个随机数。
使用post方式发送请求。

JavaScript小技能: Ajax