JS中使用 Ajax 来进行请求的几种方式

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197276.html

1. 1.什么是 AJAX
2. 2.XMLHttpRequest
• 事例 2.1: GET
• 2.3 XMLHttpRequest vs Fetch
3. 3. Fetch API
• 3.1 API 用法
• API 参数
• 3.3 示例：GET
• 错误处理
• 3.3 示例：POST
4. 4.Axios API
• 4.1 示例：GET
• 错误处理
• 4.2 示例：POST

1.什么是 AJAX

术语 AJAX 表示 异步的 JavaScript 和 XML。

AJAX 在 JS 中用于发出异步网络请求来获取资源。当然，不像名称所暗示的那样，资源并不局限于 XML，还用于获取 JSON、HTML 或纯文本等资源。

有多种方法可以发出网络请求并从服务器获取数据。 我们将一一介绍。

2.XMLHttpRequest

XMLHttpRequest对象（简称XHR）在较早的时候用于从服务器异步检索数据。

之所以使用XML，是因为它首先用于检索 XML 数据。现在，它也可以用来检索 JSON, HTML 或纯文本。

事例 2.1: GET

function success() {
  var data = JSON.parse(this.responseText)
  console.log(data)
}

function error (err) {
  console.log('Error Occurred:', err)
}

var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1")
xhr.send()

我们看到，要发出一个简单的 GET 请求，需要两个侦听器来处理请求的成功和失败。我们还需要调用open()和send()方法。来自服务器的响应存储在responseText变量中，该变量使用JSON.parse()转换为 JavaScript 对象。

function success() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function error(err) {
    console.log('Error Occurred :', err);
}

var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
);

我们看到 POST 请求类似于 GET 请求。 我们需要另外使用setRequestHeader设置请求标头“Content-Type” ，并使用 send 方法中的JSON.stringify将 JSON 正文作为字符串发送。

2.3 XMLHttpRequest vs Fetch

早期的开发人员，已经使用了好多年的 XMLHttpRequest来请求数据了。 现代的fetch API允许我们发出类似于XMLHttpRequest（XHR）的网络请求。 主要区别在于fetch() API 使用Promises，它使 API 更简单，更简洁，避免了回调地狱。

3. Fetch API

Fetch 是一个用于进行 AJAX 调用的原生 JavaScript API，它得到了大多数浏览器的支持，现在得到了广泛的应用。

3.1 API 用法

fetch(url, options)
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

API 参数

fetch() API 有两个参数

1. url是必填参数，它是您要获取的资源的路径。
2. options是一个可选参数。不需要提供这个参数来发出简单的 GET 请求。
   • method: GET | POST | PUT | DELETE | PATCH
   • headers: 请求头，如 { “Content-type”: “application/json; charset=UTF-8” }
     • mode: cors | no-cors | same-origin | navigate
     • cache: default | reload | no-cache
     • body: 一般用于 POST 请求

API 返回 Promise 对象

fetch() API 返回一个 promise 对象。

• 如果存在网络错误，则将拒绝，这会在.catch()块中处理。
• 如果来自服务器的响应带有任何状态码(如200、404、500)，则 promise 将被解析。响应对象可以在.then()块中处理。

错误处理

请注意，对于成功的响应，我们期望状态代码为200（正常状态），但是即使响应带有错误状态代码（例如404（未找到资源）和500（内部服务器错误）），fetch() API 的状态也是 resolved，我们需要在.then() 块中显式地处理那些。

我们可以在response 对象中看到 HTTP 状态：

• HTTP 状态码，例如 200。
• ok –布尔值，如果 HTTP 状态代码为 200-299，则为true。

3.3 示例：GET

const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .catch(err => console.error(err));

getTodoItem.then(response => console.log(response));

Response

 { userId: 1, id: 1, title: "delectus aut autem", completed: false }

在上面的代码中需要注意两件事:

1. fetch API 返回一个 promise 对象，我们可以将其分配给变量并稍后执行。
2. 我们还必须调用response.json()将响应对象转换为 JSON

错误处理

我们来看看当 HTTP GET请求抛出 500 错误时会发生什么：

fetch('http://httpstat.us/500') // this API throw 500 error
  .then(response => () => {
    console.log("Inside first then block");
    return response.json();
  })
  .then(json => console.log("Inside second then block", json))
  .catch(err => console.error("Inside catch block:", err));

Inside first then block
➤ ⓧ Inside catch block: SyntaxError: Unexpected token I in JSON at position 4

我们看到，即使 API 抛出 500 错误，它仍然会首先进入then()块，在该块中它无法解析错误 JSON 并抛出catch()块捕获的错误。

这意味着如果我们使用fetch()API，则需要像这样显式地处理此类错误：

fetch('http://httpstat.us/500')
  .then(handleErrors)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error("Inside catch block:", err));

function handleErrors(response) {
  if (!response.ok) { // throw error based on custom conditions on response
      throw Error(response.statusText);
  }
  return response;
}

 ➤ Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)

3.3 示例：POST

fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify({
      completed: true,
      title: 'new todo item',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Response

➤ {completed: true, title: "new todo item", userId: 1, id: 201}

在上面的代码中需要注意两件事:-

1. POST请求类似于GET请求。 我们还需要在fetch() API 的第二个参数中发送method，body 和headers 属性。
2. 我们必须需要使用 JSON.stringify() 将对象转成字符串请求body 参数

4.Axios API

Axios API 非常类似于 fetch API，只是做了一些改进。我个人更喜欢使用 Axios API 而不是fetch() API，原因如下：

• 为 GET 请求提供 axios.get()，为 POST 请求提供 axios.post()等提供不同的方法，这样使我们的代码更简洁。
• 将响应代码（例如 404、500）视为可以在catch()块中处理的错误，因此我们无需显式处理这些错误。
• 它提供了与 IE11 等旧浏览器的向后兼容性
• 它将响应作为 JSON 对象返回，因此我们无需进行任何解析

4.1 示例：GET

// 在 chrome 控制台中引入脚本的方法

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

Response

{ userId: 1, id: 1, title: "delectus aut autem", completed: false }

我们可以看到，我们直接使用 response 获得响应数据。数据没有任何解析对象，不像fetch() API。

错误处理

axios.get('http://httpstat.us/500')
  .then(response => console.log(response.data))
  .catch(err => console.error("Inside catch block:", err));

Inside catch block: Error: Network Error

我们看到，500 错误也被catch()块捕获，不像fetch() API，我们必须显式处理它们。

4.2 示例：POST

axios.post('https://jsonplaceholder.typicode.com/todos', {
      completed: true,
      title: 'new todo item',
      userId: 1
  })
  .then(response => console.log(response.data))
  .catch(err => console.log(err))

 {completed: true, title: "new todo item", userId: 1, id: 201}

我们看到 POST 方法非常简短，可以直接传递请求主体参数，这与fetch() API 不同。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/