你会发送异步请求吗？

前端异步请求

我们为什么需要异步？

假如我们在加载网页的时候，调用一个接口来获取数据，如果这个接口调用反馈时间很长，使用同步任务编写页面就会卡住，因为一个接口而影响了整个页面的加载，很明显是不合理的，这种情况下我们转变为异步任务处理，就不会因为一个接口而影响整个页面的加载

那么我们如何实现异步请求？

ajax

全称Asynchronous Javascript And XML，一种可以支持JS异步发送http请求技术一般使用XMLHttpRequest实现。他的出现允许每次数据更新仅更新需要更新部分而不用更新整个页面。

因为是异步操作，所以需要回调来接收响应，可能造成回调地狱

使用XMLHttpRequest实现，不支持promise

jquery中有封装一个ajax方法可以直接使用$.ajax(url, options)

以下是AJAX的实现步骤：

1. 首先需要创建一个XMLHttpRequest实例，这是发送请求的基础。

   let xhr = new XMLHttpRequest();
   

2. 配置请求
   使用open方法配置请求，指定请求方法（如GET或POST）、URL以及是否异步。

   xhr.open('GET', 'https://example.com/api', true);
   

3. 设置请求头（可选）
   对于POST请求，可能需要设置请求头以指定数据格式。

   xhr.setRequestHeader('Content-Type', 'application/json');
   

4. 发送请求
   使用send方法发送请求，对于POST请求可以传递数据。

   xhr.send(JSON.stringify({ key: 'value' }));
   

5. 处理响应
   通过监听readystatechange事件，判断请求状态并处理响应数据。

   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4 && xhr.status === 200) {
       console.log(xhr.responseText);
     }
   };
   

尽管AJAX功能强大，但由于其基于回调函数的特性，可能会导致代码难以维护（如回调地狱问题）。因此，现代开发中更推荐使用fetch或axios等基于Promise的解决方案。

fetch

fetch浏览器自带的异步请求方式。不需要额外安装。

对老浏览器的支持不好。

基于promise，支持async/await

fetch('url', {
    // 设置请求方式
    method: 'GET'
    // 设置请求体，请求数据等
    body:
    // 设置请求头
    headers:{
        'Content-Type': 'application/json'
    }
})
    // jquery的ajax方法可以自动处理解析json响应 fetch无法自动处理解析Json响应，需要手动处理
    .then(response => response.json()) //解析并返回数据
    // 以上解析并返回之后，才能对返回数据进行处理
    .then(data => console.log(data))
    .catch(err => console.log('Error:' + err))

axios

一个基于promise的http请求库，需要安装，比jquery轻量很多

可以拦截请求和响应，可以取消请求

import axios from 'axios'
//get请求
axios.get('url')
  .then(response => {
    console.log(response.data)
  })
  .catch(err => {
    console.log(err)
  })
//post请求
axios.post('url', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

get请求的response返回一个对象如下如所示，data中存放的是接口返回的数据。