笑话观看模式 - Javascript (1)

📌 相关文章

📜 笑话观看模式 - Javascript (1)

📅 最后修改于: 2023-12-03 15:27:22.838000 🧑 作者: Mango

笑话观看模式 - Javascript

笑话观看模式是一个使用Javascript实现的小工具，可以让用户查看各种有趣的笑话。通过该工具，程序员可以学习到如何使用异步请求和处理JSON数据。

使用方法

该工具的使用非常简单，只需要引入joke.js文件，然后调用getJoke()方法即可获取一个笑话。示例代码如下：

<script src="joke.js"></script>
<script>
  getJoke()
    .then(joke => {
      console.log(joke)
    })
    .catch(error => {
      console.error(error)
    })
</script>

实现过程

该工具利用了一个开放的笑话API：https://official-joke-api.appspot.com/random_joke。我们可以向该API发起GET请求，获取一个随机的笑话。具体的实现过程如下：

1. 发起GET请求

function getJoke() {
  const url = 'https://official-joke-api.appspot.com/random_joke'
  
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      const setup = data.setup
      const punchline = data.punchline
      return `${setup}\n\n${punchline}`
    })
    .catch(error => {
      throw new Error(error.message)
    })
}

上面的代码中，我们使用了fetch()函数向API发起GET请求，并处理了请求结果。如果请求成功，我们会解析JSON数据，然后将设置和尾声拼接在一起，并返回一个完整的笑话。如果请求失败，我们会将错误向上抛出，并在调用者处处理错误。

2. 处理结果

在获取到笑话之后，我们需要将其呈现给用户。可以在控制台打印出笑话，也可以将其展示在页面上。下面是一个简单的HTML页面示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Joke Viewer</title>
  </head>
  <body>
    <h1>Joke Viewer</h1>
    <button id="get-joke-btn">Get Joke</button>

    <script src="joke.js"></script>
    <script>
      const getJokeBtn = document.getElementById('get-joke-btn')

      getJokeBtn.addEventListener('click', () => {
        getJoke()
          .then(joke => {
            const jokeEl = document.createElement('p')
            jokeEl.innerText = joke
            document.body.appendChild(jokeEl)
          })
          .catch(error => {
            console.error(error)
          })
      })
    </script>
  </body>
</html>

这个页面包含一个按钮和一个空白的段落元素。当用户点击按钮时，我们会获取一个笑话，并将其展示在页面上。用户可以多次点击按钮，获取新的笑话。

结语

通过本文，我们学习了如何使用Javascript发起GET请求，并处理请求结果。我们利用了一个开放的笑话API，获取随机笑话并将其展示在页面上。希望这个小工具能让您感到开心，并为您的编程学习带来帮助。