【前端】Axios AJAX Fetch

不定期更新，建议关注收藏点赞。

---

Axios

• axios 是一个基于 Promise 的 JavaScript HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一个简单的 API 来发起请求，并处理请求的结果。axios 主要用于与服务器进行数据交互，比如发送 GET、POST、PUT、DELETE 请求等。相比于浏览器原生的 fetch API，axios 提供了更多的功能和便利，特别是在处理请求和响应时。

axios.get('/api/todolist')
.then((res)=>{
  console.log(res.data);
  this.setState(()=>{
    return {
    list: [...res.data]
    }
  })
.catch(()=>{alert('error')})
}

1. 安装 axios

如果你使用的是 Node.js 或者 React 等项目，首先需要通过 npm 或 yarn 安装 axios。

# 使用 npm 安装
npm install axios

# 使用 yarn 安装
yarn add axios

2. 基本用法

axios 提供了多种方法来发送 HTTP 请求，包括 axios.get()、axios.post()、axios.put()、axios.delete()等。

发送 GET 请求

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);  // 响应数据
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

• get 方法用于发送 GET 请求。
• response.data 包含了从服务器返回的数据。

发送 POST 请求

import axios from 'axios';

const data = {
  name: 'John Doe',
  email: '[e-mail]'
};

axios.post('https://api.example.com/users', data)
  .then(response => {
    console.log('User created:', response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

• post 方法用于发送 POST 请求。
• 请求体中的数据（data）会被发送到服务器。

发送 PUT 请求

import axios from 'axios';

const updatedData = {
  name: 'Jane Doe',
  email: '[e-mail]'
};

axios.put('https://api.example.com/users/1', updatedData)
  .then(response => {
    console.log('User updated:', response.data);
  })
  .catch(error => {
    console.error('Error updating data:', error);
  });

• put 方法用于发送 PUT 请求。它通常用于更新现有的资源。

发送 DELETE 请求

import axios from 'axios';

axios.delete('https://api.example.com/users/1')
  .then(response => {
    console.log('User deleted:', response.data);
  })
  .catch(error => {
    console.error('Error deleting data:', error);
  });

• delete 方法用于删除指定的资源。

3. 请求配置

axios 支持配置请求的各个方面，如 headers、params、timeout 等。你可以通过第二个参数传递一个配置对象来设置这些选项。

示例：设置请求头

import axios from 'axios';

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer your_token_here'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

示例：设置请求超时

import axios from 'axios';

axios.get('https://api.example.com/data', {
  timeout: 5000  // 设置超时时间为 5 秒
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('Request timeout');
    } else {
      console.error('Error:', error);
    }
  });

4. 拦截器（Interceptors）

axios 提供了拦截器机制，使得你可以在请求发送之前或响应返回之后执行一些逻辑。

请求拦截器

import axios from 'axios';

axios.interceptors.request.use(config => {
  console.log('Request Interceptor:', config);
  // 在发送请求之前做些什么，比如添加 token 等
  config.headers['Authorization'] = 'Bearer your_token_here';
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器

import axios from 'axios';

axios.interceptors.response.use(response => {
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  console.error('Response Error:', error);
  return Promise.reject(error);
});

• 请求拦截器可以在请求发送之前修改请求的配置。
• 响应拦截器可以在响应返回之后处理响应数据或者捕获错误。

5. 取消请求

有时你可能需要取消一个正在进行的请求，axios 提供了 CancelToken 来实现这一功能。

import axios from 'axios';

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled:', error.message);
    } else {
      console.error('Error:', error);
    }
  });

// 取消请求
source.cancel('Operation canceled by the user.');

6. 并发请求

axios 还可以让你同时发送多个请求，并在它们全部完成后进行处理，使用 axios.all 和 axios.spread 来实现。

import axios from 'axios';

const request1 = axios.get('https://api.example.com/data1');
const request2 = axios.get('https://api.example.com/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    console.log('Response 1:', response1.data);
    console.log('Response 2:', response2.data);
  }))
  .catch(error => {
    console.error('Error:', error);
  });

7. 处理错误

axios 会将所有错误统一通过 catch 捕获。你可以通过 error.response 来访问服务器返回的错误信息。

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了响应
      console.error('Response error:', error.response);
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('Request error:', error.request);
    } else {
      // 发生了其他错误
      console.error('Error:', error.message);
    }
  });

• axios v.s. AJAX v.s. fetch

axios 在前端开发中具有较高的使用率，fetch 作为原生 API 也被广泛采用，而 XMLHttpRequest 的使用率相对较低。

特性	AJAX (XMLHttpRequest)	Fetch API	Axios
基于	回调函数	Promise	Promise
请求响应处理	需要手动管理请求状态和解析响应	自动解析 JSON，但仍需要手动处理错误	自动解析 JSON，无需手动处理响应数据
请求和响应拦截器	无	无	支持请求和响应拦截器
跨域请求	需要额外配置 CORS 头	需要额外配置 CORS 头	支持自动处理跨域请求（需要后端支持）
请求取消	需要使用 AbortController	需要使用 AbortController	支持请求取消，直接使用 CancelToken
浏览器兼容性	在所有浏览器中都能工作，但老旧浏览器不支持	大多数现代浏览器支持，但 IE 需要 polyfill	支持现代浏览器和 IE（需要 polyfill）
支持的功能	基本的 HTTP 请求功能	基本的 HTTP 请求功能	更丰富的功能：请求/响应拦截器、取消请求等
使用难度	相对较复杂，需要手动管理请求状态和响应解析	简单，支持 Promise，且 API 直观	简单，且有更多的功能和配置选项

• axios与python requests库

功能	Axios (JavaScript)	Requests (Python)
异步操作	基于 Promise，支持 async/await	同步请求，需要配合 aiohttp 异步库
自动解析响应	自动解析 JSON	自动解析 JSON
请求拦截器/响应拦截器	支持请求和响应拦截器	不支持直接的拦截器功能
取消请求	支持 CancelToken 来取消请求	无原生支持取消请求
跨域请求	处理跨域请求（CORS）	不涉及浏览器，跨域由后端控制
浏览器支持	支持现代浏览器	仅支持 Python 环境

低级 HTTP 请求通常是指在较低的抽象层次上进行的 HTTP 请求，通常需要开发者手动处理许多细节，例如请求头、参数、响应处理、编码等。相比高级 HTTP 请求，低级 HTTP 请求提供了更多的灵活性和控制，但也要求开发者更了解底层的 HTTP 协议和细节。

python中类似的库：requests、httpx、aiohttp、urllib、pycurl、tornado，后端开发使用。

AJAX

AJAX（Asynchronous JavaScript and XML）本身并不属于 HTML。它是一个基于 JavaScript 的技术，用于实现网页的异步请求和更新。因此，AJAX 更准确地说是 JavaScript 技术，而不是 HTML 技术。
AJAX（Asynchronous JavaScript and XML）是一个用于创建动态和交互式网页的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种方式能提高用户体验，因为它使得网页加载更加流畅，用户可以与页面进行交互，而无需等待页面的完全刷新。
尽管它的名字中有 “XML”，但现在 AJAX 主要用于通过 JSON（JavaScript Object Notation）与服务器交换数据。不过，它也支持通过 XML、HTML 或纯文本等格式进行数据交换。

• AJAX 的工作原理
  AJAX 允许浏览器在后台发送 HTTP 请求到服务器，获取数据并在不刷新页面的情况下更新网页内容。通常，AJAX 使用 JavaScript 与服务器进行通信，通过 XMLHttpRequest 对象或现代的 fetch API 来发送请求。
  AJAX 的基本流程如下：
  用户发起请求（例如，点击按钮或加载页面时）。
  JavaScript 使用 XMLHttpRequest 或 fetch() 向服务器发送请求（GET、POST 等）。
  服务器接收请求，处理数据，并返回响应。
  JavaScript 处理服务器返回的数据，并更新页面内容。

什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象能够：
在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据

• 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>
    <h1>AJAX Example</h1>
    <button id="loadData">Load Data</button>
    <div id="result"></div>  <!-- 结果将显示在这里 -->
    
    <script src="app.js"></script>
</body>
</html>

// 获取按钮和结果展示区域
const button = document.getElementById('loadData');
const result = document.getElementById('result');

// 添加点击事件监听器
button.addEventListener('click', function() {
    // 创建一个新的 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();

    // 配置请求：GET 请求，指向一个 JSON 文件
    xhr.open('GET', 'data.json', true);  // 异步请求

    // 设置 onload 事件处理函数
    xhr.onload = function() {
        if (xhr.status === 200) {  // 如果请求成功
            const data = JSON.parse(xhr.responseText);  // 解析返回的 JSON 数据
            result.innerHTML = `Message: ${data.message}`;  // 显示结果
        } else {
            result.innerHTML = 'Error loading data';
        }
    };

    // 发送请求
    xhr.send();
});

• 例子：使用 fetch() API 替代 XMLHttpRequest
  fetch() 是现代浏览器提供的一个 API，使用 Promise,比 XMLHttpRequest 更简洁，更强大的功能：fetch() 支持更多的功能，如设置请求头、控制超时等。并且它默认支持异步操作。这里是相同请求的 fetch() 版本：

const button = document.getElementById('loadData');
const result = document.getElementById('result');

button.addEventListener('click', function() {
    // 使用 fetch 发起请求
    fetch('data.json')
        .then(response => response.json())  // 解析返回的 JSON
        .then(data => {
            result.innerHTML = `Message: ${data.message}`;  // 显示数据
        })
        .catch(error => {
            result.innerHTML = 'Error loading data';
            console.error(error);
        });
});

XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。
注意，尽量不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

• 上面代码的URL使用的是相对路径。如果你把它改为’http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。
  这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
  完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）使用 JavaScript 请求外域（即跨域请求）时，通常会遇到 跨域资源共享 (CORS, Cross-Origin Resource Sharing) 的限制。默认情况下，浏览器会阻止网页发起跨域请求，以保护用户的安全。为了绕过这个限制，目标网站必须明确允许你的域名进行请求。

用JavaScript怎么请求外域（就是其他网站）的URL了呢？

1. 使用 fetch() API（推荐）
   现代浏览器支持 fetch()，可以发起跨域请求，但前提是目标网站支持 CORS。如果目标网站没有明确设置允许跨域访问，那么请求会被浏览器阻止。如果目标网站支持 CORS 并正确设置了头部（例如 Access-Control-Allow-Origin），请求就会成功。

fetch('https://example.com/data', {
    method: 'GET',  // 或者 'POST'，取决于你的请求类型
    headers: {
        'Content-Type': 'application/json'
    },
    mode: 'cors'  // 必须设置为 'cors'，表示进行跨域请求
})
    .then(response => response.json())  // 解析 JSON 数据
    .then(data => console.log(data))    // 处理返回的响应
    .catch(error => console.error('Error:', error));  // 错误处理

2. 使用 XMLHttpRequest（旧版）
   XMLHttpRequest 是发起 HTTP 请求的传统方式，它也可以用于发起跨域请求，但依赖于目标网站的 CORS 设置。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

readyState 表示当前请求的状态。
XMLHttpRequest 的请求生命周期有 5 个阶段（0 到 4），表示请求的不同状态：
0 - UNSENT：对象已创建，但尚未调用 open() 方法。
1 - OPENED：已调用 open()，但尚未调用 send()。
2 - HEADERS_RECEIVED：已发送请求，并且已接收到响应头。
3 - LOADING：正在下载响应体。
4 - DONE：响应已完全下载，处理完成。
status 表示 HTTP 响应的状态码。