Javascript - 在 localhost 上使用 fetch 和 URL 参数

在Web开发中，使用fetch函数可以方便地从API获取数据。在本文中，我们将学习如何在localhost上使用fetch函数和URL参数。

基本语法

首先，让我们看一下fetch函数的基本语法：

fetch(url, options)

该函数接受两个参数，一个是URL，另一个是选项。URL是我们想要获取的数据的地址，选项包含一些配置项，例如使用GET还是POST方法、请求头信息等。

示例代码

假设我们有一个API地址，可以返回JSON格式的数据。我们将使用fetch函数从此API获取数据，并将数据呈现在HTML页面上。

准备工作

首先，我们需要在本地设置一个简单的HTTP服务器。我们可以使用Node.js自带的http-server模块。

在命令行中，输入以下命令：

npm install http-server -g

然后，在一个新的终端中，进入我们的项目目录，并启动HTTP服务器：

http-server

现在，我们可以在浏览器中通过访问http://localhost:8080来访问我们的项目。

获取数据

接下来，我们将编写JavaScript代码，使用fetch函数获取数据，并将其呈现在HTML页面上。

const url = 'http://localhost:3000/data' // API地址

fetch(url) // 发送GET请求
  .then(response => {
    if (response.ok) { // 如果服务器返回了200 OK状态码
      return response.json() // 转换JSON格式
    } else {
      throw new Error('服务器响应异常') // 抛出错误
    }
  })
  .then(data => {
    // 在HTML页面中呈现数据
    const container = document.createElement('div')
    container.innerHTML = `数据：${data}`
    document.body.appendChild(container)
  })
  .catch(error => {
    console.error(error)
  })

上述代码中，我们首先定义了API的地址，然后使用fetch函数发送GET请求。如果服务器返回了200 OK状态码，我们将响应转换为JSON格式，并将数据呈现在HTML页面上。如果服务器返回异常状态码，我们将抛出一个错误。

可以看到，使用fetch函数获取数据非常方便，只需要几行JavaScript代码即可完成。

URL参数

在本文最后，让我们看一下如何在URL中添加参数。

假设我们的API接受一个参数，名称为id。我们可以通过将参数值添加到URL中来进行请求。例如：

const id = 1 // 参数值
const url = `http://localhost:3000/data?id=${id}` // 带有参数的URL

fetch(url) // 发送GET请求
  .then(response => {
    ...
  })
  .catch(error => {
    ...
  })

在上述代码中，我们将参数值添加到了URL中，并使用fetch函数进行了请求。在服务端，可以通过解析URL中的参数值来处理请求。

结论

在本文中，我们学习了如何在localhost上使用fetch函数和URL参数进行API数据的获取。fetch函数简单易用，同时具有很高的可扩展性，可以轻松地添加请求头、处理多种数据格式等。