Axios 文档：全面解析和上手指南

2023-10-22 16:22:34

在当今的Web开发中，进行HTTP请求是必不可少的。Axios作为一款轻量级且灵活的HTTP库，深受广大前端开发人员的喜爱。它不仅支持浏览器环境，还支持Node.js环境，让您可以在多种场景下轻松使用。

Axios 文档解析

1. 安装

您可以使用npm或yarn安装Axios：

npm install axios

或者

yarn add axios

2. 基本用法

Axios最基本的使用方式是发送一个GET请求：

axios.get('https://www.example.com/api/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

3. 发送其他类型的请求

除了GET请求，Axios还支持发送其他类型的请求，例如POST、PUT、DELETE等。使用方法类似，只需修改第一个参数即可：

axios.post('https://www.example.com/api/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

4. 配置请求

Axios允许您配置请求，例如设置超时时间、添加请求头等：

axios.get('https://www.example.com/api/users', {
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

5. 拦截器

Axios提供了拦截器功能，允许您在请求发送前或响应返回后执行一些操作。例如，您可以使用拦截器来添加请求头、处理错误等：

axios.interceptors.request.use(function (config) {
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  return Promise.reject(error);
});

Axios 上手指南

1. 创建一个Axios实例

在大多数情况下，您只需要创建一个Axios实例即可：

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

2. 使用Axios实例发送请求

使用Axios实例发送请求非常简单，只需将Axios实例作为第一个参数传入即可：

axiosInstance.get('/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

3. 处理错误

Axios提供了多种方式来处理错误。您可以使用.catch()方法来捕获错误，也可以使用.then()方法来处理错误。例如：

axiosInstance.get('/users')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (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', error.message);
    }
    console.log(error.config);
  });