JavaScript中的axios

在 Web 开发中，前端与后端的数据交互几乎无处不在。从早期的 XMLHttpRequest 到如今流行的 axios，HTTP 请求技术不断演进，变得更简洁、更强大。本文将带你从 AJAX 的基础讲起，重点介绍 axios 的使用方法和最佳实践。

一. AJAX 简介

AJAX （Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。它的核心是 XMLHttpRequest 对象，但直接使用它会比较繁琐：

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

二. Axios 是什么？

Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js。它有以下特点：

（1）支持 Promise API

（2）拦截请求和响应

（3）转换请求和响应数据

（4）自动转换 JSON 数据

（5）客户端支持防御 XSRF

三. 安装与基本使用

javascript 复制代码

npm install axios
# 或
yarn add axios

1. 基本 GET 请求

javascript 复制代码

import axios from 'axios';

axios.get('/api/user?ID=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

2. 带参数的 GET 请求

javascript 复制代码

axios.get('/api/user', {
    params: {
      ID: 12345
    }
  })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

3. POST 请求

javascript 复制代码

axios.post('/api/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(response => console.log(response))
  .catch(error => console.error(error));

四. 并发请求

Axios 提供了 axios.all 和 axios.spread 来处理并发请求：

javascript 复制代码

function getUserAccount() {
  return axios.get('/api/user/12345');
}

function getUserPermissions() {
  return axios.get('/api/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求都完成了
    console.log(acct.data, perms.data);
  }));

五. 请求与响应拦截器

拦截器可以在请求发送前或响应返回后做一些统一处理：

javascript 复制代码

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 未授权，跳转登录页
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

六. 创建实例

当项目中有多个 API 地址或需要不同配置时，可以创建 axios 实例：

javascript 复制代码

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/user')
  .then(response => console.log(response.data));

七. 错误处理

Axios 的错误处理非常灵活：

javascript 复制代码

axios.get('/api/user/12345')
  .catch(error => {
    if (error.response) {
      // 请求已发出，服务器用状态码响应（非 2xx）
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log(error.request);
    } else {
      // 设置请求时发生了一些事情，触发了错误
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

八. 取消请求

Axios 支持取消尚未完成的请求：

javascript 复制代码

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

axios.get('/api/user/12345', {
  cancelToken: source.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled:', thrown.message);
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

九. 总结

Axios 已经成为现代前端开发中处理 HTTP 请求的首选库，它简化了 AJAX 的使用方式，提供了丰富的功能和优秀的错误处理机制。无论是简单的 GET 请求还是复杂的并发请求和拦截处理，Axios 都能胜任。