跟着月影学js

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

1.三大件各司其责

html 用来表示结构 css 用来表示表现 js 用来表示行为

例子：实现白天和黑夜两种主题的方法

// 方法一：利用js去控制style
// 缺点很明显，不应该用js去控制样式
const btn = document.querySelector("button")
btn.addEventListener('click', (e) => {
    const body = document.body;
    if(e.target.innerHTML === '🌞') {
      body.style.backgroundColor = 'black';
      body.style.color = 'white';
      e.target.innerHTML = '🌜';
    } else {
      body.style.backgroundColor = 'white';
      body.style.color = 'black';
      e.target.innerHTML = '🌞';
    }
  });

// 方法二：利用js去控制html的类标签
// 同样的缺点，不应该去在js里控制结构
const btn = document.getElementById('modeBtn');

btn.addEventListener('click', (e) => {
  const body = document.body;
  if (body.className != 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
})

// 方法三：不用js，通过在html里增加一个伴随input框，在css里实现转换逻辑
// 优点：各司其职
<input type="checkbox" id="modeCheckBox">
    <div class="content">
        <header>
            <label id="modeBtn" for="modeCheckBox"></label>


#modeBtn::after {
    content: '🌞';
}

#modeCheckBox {
    display: none;
}

#modeCheckBox:checked+.content {
    background-color: black;
    color: white;
    transition: all 1s;
}

#modeCheckBox:checked+.content #modeBtn::after {
    content: '🌜';
}

2.异步函数

异步js的概念

我的理解：主要是为了解决一些耗时的，不能立刻完成的任务设计的一种机制，来实现当该任务完成时，程序知道它完成并进行处理，如果没有完成，不影响后续代码的执行。

etch() API Web API 接口

全局的 fetch() 方法用于发起获取资源的请求。

它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

Promise简介

• Promise具有三种状态
  • pending(待定): 在进行中
  • fulfilled(完成): 意味着操作完成，当操作完成时，调用then()
  • rejected(拒绝)：意味着操作失败，失败时，调用catch()函数
• then() 方法

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

console.log(fetchPromise);

fetchPromise.then( response => {
  console.log(`已收到响应：${response.status}`);
});

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

• 链式使用 Promise 优雅之处在于，then方法本身也会返回一个Promise, 可以把需要调用的异步函数，作为上一个异步函数then()方法的返回值

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

fetchPromise
  .then( response => {
    return response.json();
  })
  .then( json => {
    console.log(json[0].name);
  });

• catch() 方法 在Promise()链中任一个Promise出现问题，都可能会报错，进入最后的catch()

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}`);
  });

• 合并使用多个Promise(), 不相互依赖 利用Promise.all([Promise1, Promise2, Promise3])当且仅当数组中所有的 Promise 都被兑现时，才会通知 then() 处理函数并提供一个包含所有响应的数组，数组中响应的顺序与被传入 all() 的 Promise 的顺序相同。

• async 与 await async: 在声明一个异步函数的时候，在函数开头使用async await: 在调用一个返回Promise的函数前使用await, 例如fetch, json try catch: 这样就可以用这样的同步逻辑实现异步代码

async function fetchProducts() {
  try {
    // 在这一行之后，我们的函数将等待 `fetch()` 调用完成
    // 调用 `fetch()` 将返回一个“响应”或抛出一个错误
    const response = await fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
    if (!response.ok) {
      throw new Error(`HTTP 请求错误：${response.status}`);
    }
    // 在这一行之后，我们的函数将等待 `response.json()` 的调用完成
    // `response.json()` 调用将返回 JSON 对象或抛出一个错误
    const json = await response.json();
    console.log(json[0].name);
  }
  catch(error) {
    console.error(`无法获取产品列表：${error}`);
  }
}

fetchProducts();