大家好,今天小编来为大家解答以下的问题，关于如何在JS中使用Ajax发出请求，这个很多人还不知道，现在让我们一起来看看吧！

1.AJAX

术语AJAX 代表异步JavaScript 和XML。

JS中使用AJAX进行异步网络请求来获取资源。当然，顾名思义，资源不限于XML，还可以用于获取JSON、HTML或纯文本等资源。

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

2.XMLHttpRequest

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

使用XML 是因为它首先用于检索XML 数据。现在，它还可以用于检索JSON、HTML 或纯文本。

事例 2.1: GET

functionsuccess(){vardata=JSON.parse(this.responseText)console.log(data)}functionerror(err){console.log(‘ErrorOccurred:’,err)}varxhr=newXMLHttpRequest()xhr.onload=successxhr .onerror=errorxhr.open(‘GET’,”https://jsonplaceholder.typicode.com/posts/1′)xhr.send() 我们看到，要发出一个简单的GET 请求，需要两个监听器来处理success 的请求和失败。我们还需要调用open() 和send() 方法。来自服务器的响应存储在responseText变量中，该变量使用JSON.parse()转换为JavaScript对象。

functionsuccess(){vardata=JSON.parse(this.responseText);console.log(data);}functionerror(err){console.log(‘ErrorOccurred:’,err);}varxhr=newXMLHttpRequest();xhr.onload=成功；xhr.onerror=错误；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={//handleresponsedata}).catch(err={//handleerrors});API参数

fetch() API 有两个参数

url是必填参数，它是你要获取的资源的路径。 options 是一个可选参数。无需提供此参数即可发出简单的GET 请求。方法：获取|发布|放置|删除| PATCHheaders: 请求头，如{ “Content-type” : “application/json; charset=UTF-8” }mode: cors |没有cors |同源|默认| 导航缓存：重新加载| no -cachebody: 一般用于POST请求API返回Promise对象

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

如果出现网络错误，它将被拒绝，该错误在.catch() 块中处理。如果服务器的响应带有任何状态代码（如200、404、500），则承诺将得到解决。响应对象可以在.then() 块中处理。错误处理

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

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

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

3.3 示例：GET

constgetTodoItem=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:’delectusautautem’,completed:false}上面的代码：中有两点需要注意

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

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

fetch(‘http://httpstat.us/500’)//thisAPIthrow500error.then(response=()={console.log(‘Insidefirstthenblock’);returnresponse.json();}).then(json=console.log(‘Insidesecondthenblock) ‘,json)).catch(err=console.error(‘Insidecatchblock:’,err));InsidefirstthenblockInsidecatchblock:SyntaxError:UnexpectedtokenIinJSONatposition4 我们看到，即使API抛出500错误，仍然会先进入then()块，其中block 无法解析错误JSON 并抛出catch() 块捕获的错误。

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

fetch(‘http://httpstat.us/500’).then(handleErrors).then(response=response.json()).then(response=console.log(response)).catch(err=console.error(‘Insidecatchblock:’ 10 fetch(‘https://jsonplaceholder.typicode.com/todos’,{method:’POST’,body:JSON.stringify({completed:true,title:’newtodoitem’,userId:1}),headers:{‘内容类型’:’application/json;charset=UTF-8′}}).then(response=response.json()).then(json=console.log(json)).catch(err=console.log(err))Response{completed:true,title:’newtodoitem上面代码中需要’,userId:1,id:201} 注意两点：-

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

3.3 示例：POST

Axios API 与fetch API 非常相似，但有一些改进。我个人更喜欢使用Axios API 而不是fetch() API，原因如下：

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

4.Axios API

//在chrome 控制台中引入脚本的方法varscript=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:’delectusautautem’,completed:false}我们可以看到是的，我们直接使用response来获取响应数据。与fetch() API 不同，数据没有任何解析对象。

错误处理

axios.get(‘http://httpstat.us/500’).then(response=console.log(response.data)).catch(err=console.error(‘Insidecatchblock:’,err));Insidecatchblock:Error:NetworkError 我们还看到500 错误由catch() 块捕获，与fetch() API 不同，我们必须显式处理它们。