50projects50days知识点-dad-jokes

示例网址：

https://50projects50days.com/projects/split-landing-page/

http://50projects.tc.cluski.top/50projects50days/split-landing-page/

效果：

思路：

在按钮上添加click事件，监听到时间之后发送网络请求，请求一则笑话。然后将请求到的笑话设置到画面上。

letter-spacing

CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。

fetch()

全局的 fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

参数

• ?input

  定义要获取的资源。这可能是：

  • 一个 USVString 字符串，包含要获取资源的 URL。一些浏览器会接受 blob: 和 data: 作为 schemes.
  • 一个 Request 对象。

• init 可选

  一个配置项对象，包括所有对请求的设置。可选的参数有：

  • method: 请求使用的方法，如 GET、POST。
  • headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。
  • body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  • mode: 请求的模式，如 cors、no-cors 或者 same-origin。
  • credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie，必须提供这个选项，从 Chrome 50 开始，这个属性也可以接受 FederatedCredential (en-US) 实例或是一个 PasswordCredential (en-US) 实例。
  • cache: 请求的 cache 模式：default、 no-store、 reload 、 no-cache、 force-cache 或者 only-if-cached。
  • redirect: 可用的 redirect 模式：follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误），或者 manual (手动处理重定向)。在 Chrome 中默认使用 follow（Chrome 47 之前的默认值是 manual）。
  • referrer: 一个 USVString 可以是 no-referrer、client 或一个 URL。默认是 client。
  • referrerPolicy: 指定了 HTTP 头部 referer 字段的值。可能为以下值之一：no-referrer、 no-referrer-when-downgrade、origin、origin-when-cross-origin、 unsafe-url。
  • integrity: 包括请求的 subresource integrity 值（例如： sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=）。

在此例子中的使用：

const jokeEl = document.getElementById('joke')
const jokeBtn = document.getElementById('jokeBtn')

jokeBtn.addEventListener('click', generateJoke)

generateJoke()

// USING ASYNC/AWAIT
async function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
    method: 'GET',
  }

  const res = await fetch('https://icanhazdadjoke.com', config)

  const data = await res.json()

  jokeEl.innerHTML = data.joke
}

参考链接：fetch() - Web API 接口参考 | MDN (mozilla.org)