【Axios使用手册】如何使用axios向后端发送请求并进行数据交互

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持请求和响应拦截、取消请求、自动转换 JSON 数据等功能，非常适合在现代 JavaScript 应用中进行网络请求。以下是对 axios 的详细讲解，包括安装、基本用法、高级功能等。

1. 安装

你可以通过 npm 或 yarn 来安装 axios：

深色版本

复制代码

npm install axios

或者

深色版本

复制代码

yarn add axios

2. 基本用法

发送 GET 请求

复制代码

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data); // 打印响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

发送 POST 请求

复制代码

import axios from 'axios';

const data = {
  username: 'example',
  password: 'password123'
};

axios.post('/api/login', data)
  .then(response => {
    console.log(response.data); // 打印响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

发送 PUT 请求

复制代码

import axios from 'axios';

const updatedData = {
  id: 1,
  name: 'Updated Name'
};

axios.put('/api/resource/1', updatedData)
  .then(response => {
    console.log(response.data); // 打印响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

发送 DELETE 请求

复制代码

import axios from 'axios';

axios.delete('/api/resource/1')
  .then(response => {
    console.log('删除成功');
  })
  .catch(error => {
    console.error('删除失败:', error);
  });

3. 配置默认设置

你可以为 axios 设置默认的配置项，例如基础 URL、请求头等。这在多个请求中使用相同的配置时非常有用。

复制代码

import axios from 'axios';

// 设置默认的基础 URL 和请求头
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer your-token-here';
axios.defaults.headers.post['Content-Type'] = 'application/json';

// 现在所有的请求都会使用这些默认设置
axios.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

4. 请求和响应拦截器

axios 提供了请求和响应拦截器，可以在请求发送前或响应接收后对数据进行处理。

请求拦截器

复制代码

import axios from 'axios';

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

响应拦截器

复制代码

import axios from 'axios';

axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    console.log('响应拦截器:', response);
    return response;
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.error('服务器响应错误:', error.response.status);
    } else {
      // 某种请求错误（如网络问题）
      console.error('请求错误:', error.message);
    }
    return Promise.reject(error);
  }
);

5. 取消请求

axios 支持取消请求，这对于长时间运行的请求或用户操作（如页面切换）非常重要。

创建取消令牌

复制代码

import axios from 'axios';
import CancelToken from 'axios/lib/cancel/CancelToken';

const source = CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('请求已取消:', thrown.message);
    } else {
      // 处理其他类型的错误
      console.error('请求失败:', thrown);
    }
  });

// 取消请求
source.cancel('操作被用户取消');

6. 并发请求

axios 提供了 axios.all 和 axios.spread 方法来并发执行多个请求，并在所有请求完成后处理结果。

复制代码

import axios from 'axios';

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

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

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((account, permissions) => {
    console.log(account.data, permissions.data);
  }))
  .catch(error => {
    console.error('请求失败:', error);
  });

7. 文件上传

axios 支持文件上传，通常使用 FormData 对象来封装文件和其他表单数据。

复制代码

import axios from 'axios';

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('description', '文件描述');

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('文件上传成功:', response.data);
  })
  .catch(error => {
    console.error('文件上传失败:', error);
  });

8. 使用 Axios 实例

你还可以创建自定义的 axios 实例，以便为不同的 API 设置不同的配置。

复制代码

import axios from 'axios';

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

apiClient.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

9. 错误处理

axios 的错误对象包含丰富的信息，可以帮助你更好地处理错误。

复制代码

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器响应了一个错误状态码
      console.error('服务器响应错误:', error.response.status, error.response.data);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('请求未收到响应:', error.request);
    } else {
      // 其他类型的错误
      console.error('请求错误:', error.message);
    }
  });

10. 使用 TypeScript

如果你使用 TypeScript，axios 提供了类型定义，使得代码更加安全和易于维护。

复制代码

import axios, { AxiosResponse } from 'axios';

interface User {
  id: number;
  name: string;
}

axios.get<User[]>('/api/users')
  .then((response: AxiosResponse<User[]>) => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

总结

axios 是一个强大且灵活的 HTTP 客户端，适用于各种网络请求场景。它支持多种请求方法、配置选项、拦截器、并发请求、文件上传等功能，同时还提供了良好的错误处理机制和 TypeScript 支持。通过合理使用 axios，你可以简化前端与后端之间的通信，提升开发效率和代码质量。