Axios-HTTP入门教程

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它提供了简洁易用的 API，使得发送 HTTP 请求变得非常简单。本教程将带你从基础到高级，全面掌握 Axios 的使用方法。

安装

通过 npm 安装

在 Node.js 环境中，你可以使用 npm 来安装 Axios：

npm install axios

通过 CDN 引入

在浏览器中，你可以通过 CDN 引入 Axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

基本用法

发送 GET 请求

// 使用 CommonJS 模块系统引入 Axios
const axios = require('axios');

// 发送 GET 请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发送 POST 请求

axios.post('https://api.example.com/data', {
    key: 'value'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发送带参数的 GET 请求

axios.get('https://api.example.com/data', {
    params: {
      id: 1,
      name: 'example'
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

响应处理

Axios 的响应是一个包含多个属性的对象，主要有：

data: 响应数据
status: 响应状态码
headers: 响应头
config: 请求配置
request: 请求对象

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.status); // 200
    console.log(response.headers); // 响应头
    console.log(response.data); // 响应数据
  });

错误处理

在请求过程中，可能会出现错误，比如网络错误或服务器返回错误状态码。你可以通过 .catch() 方法来捕获这些错误。

axios.get('https://api.example.com/data')
  .catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      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.message);
    }
  });

高级用法

拦截器

拦截器允许你在请求发送之前或响应到达之后对它们进行处理。

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    console.log('请求拦截器', config);
    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    console.log('响应拦截器', response);
    return response;
  }, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

取消请求

你可以使用 CancelToken 来取消请求。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('https://api.example.com/data', {
    cancelToken: new CancelToken(c => cancel = c)
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('请求被取消', thrown.message);
    } else {
      // 处理错误
    }
  });

// 取消请求
cancel();

配置默认值

你可以配置 Axios 的默认值，这样你就不需要在每个请求中重复设置相同的配置。

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 2000;

配置选项

Axios 提供了许多配置选项，你可以在创建实例或发送请求时进行配置。

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

全局 axios 实例

你可以创建一个全局的 Axios 实例，并在应用中复用它。

// axiosInstance.js
import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 2000,
    headers: { 'Content-Type': 'application/json' }
  });

export default instance;

// 其他文件
import axiosInstance from './axiosInstance';

axiosInstance.get('/data')
  .then(response => {
    console.log(response.data);
  });

最佳实践

管理请求状态：在发送请求时，通常需要管理加载状态和错误状态，可以在组件中使用状态来管理这些信息。
处理 token：如果你的应用需要认证，可以在请求头中添加 token，并在拦截器中处理 token 的刷新或过期。
错误统一处理：可以在响应拦截器中统一处理错误，避免在每个请求中重复处理错误逻辑。

常见问题

跨域问题：确保服务器端设置了正确的 CORS 头。
网络错误：检查网络连接，或者服务器是否正常运行。
状态码错误：服务器返回了非 200 的状态码，检查服务器端的错误日志。

参考资料

希望这篇教程能帮助你更好地理解和使用 Axios。如果你有任何问题，欢迎在下方留言交流！

安装