没有 HTTP 提供者! { HTTP Native} - Javascript

在处理网络请求时，许多 JavaScript 开发人员会使用第三方库，例如 Axios 或 jQuery。但时候你想要保持代码库的轻量化以及减少使用第三方库的依赖，你可以使用 JavaScript 的原生 HTTP 提供者。

XMLHTTPRequest

XMLHttpRequest 是一个 JavaScript 对象，可以用于与服务器进行数据交互。你可以使用它来获取数据，修改数据并更新您的网站。

const request = new XMLHttpRequest() // 创建一个 XMLHttpRequest 实例
request.open('GET', '/my/url', true) // 对指定 URL 发送请求

request.onload = function () {
  // 处理返回的数据
  if (request.status >= 200 && request.status < 400) {
    // 成功的请求
    const data = request.responseText
  } else {
    // 处理错误
  }
}

request.onerror = function () {
  // 连接错误的处理代码
}

request.send() // 发送请求

这是一个基本的 GET 请求的示例。你可以在 open() 函数中传递不同的 HTTP 方法来进行其他类型的请求。此外，你还可以将数据作为参数发送。

request.open('POST', '/my/post/url', true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')
request.send('param1=value1&param2=value2')

Fetch API

ES6 引入了一个新的 JavaScript API，它可以帮助我们轻松地处理网络请求 - Fetch API。

Fetch API 提供了更好的处理方式，如 Promise 对象和默认的跨域请求设置。这使得它变得更加灵活和易于使用。看一下下面这个例子：

fetch('/my/url')
  .then(response => response.text())
  .then(data => console.log(data))

这个代码片段发起一个 GET 请求，然后打印请求返回的文本数据。

你还可以使用 Fetch API 发送带有数据和自定义头的 POST 请求：

const formData = new FormData()
formData.append('param1', 'value1')
formData.append('param2', 'value2')

fetch('/my/url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  body: formData
})
  .then(response => response.text())
  .then(data => console.log(data))

使用 fetch 时，你也可以通过传递一个 Request 对象来自定义请求。例如，下面的代码会在请求中添加一个自定义请求头：

const myRequest = new Request('/my/url', {
  headers: new Headers({
    'Custom-Header': 'Hello World'
  })
})

fetch(myRequest)
  .then(response => response.text())
  .then(data => console.log(data))

总结

如你所见，原生的 JavaScript HTTP 提供者可以用于与服务器进行数据交互并处理返回的数据。而且，在使用原生的 JavaScript HTTP 提供者时，你不必依赖于第三方库，从而减少了代码库的大小和复杂性。不过，使用其他 HTTP 提供者库可以让我们更轻松地处理各种 HTTP 请求场景。