Axios教程

Axios 是一个基于 Promise 的 HTTP 客户端，适用于浏览器和 node.js。它提供了简单易用的 API，用于发送 HTTP 请求并处理响应。本文将带你从安装 Axios 开始，逐步了解其基本用法、配置选项以及如何处理错误。

1. 安装 Axios

首先，你需要安装 Axios。你可以使用 npm 或 yarn 来安装它。

使用 npm:

npm install axios

使用 yarn:

yarn add axios

2. 基本用法

安装完成后，你可以在你的 JavaScript 或 typescript 文件中引入 Axios，并开始发送 HTTP 请求。

发送 GET 请求:

const axios = require('axios');

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

发送 POST 请求:

const axios = require('axios');

const data = {
  key1: 'value1',
  key2: 'value2'
};

axios.post('https://api.example.com/submit', data)
  .then(response => {
    console.log('Data submitted:', response.data);
  })
  .catch(error => {
    console.error('Error submitting data:', error);
  });

3. 配置 Axios 实例

你可以创建一个 Axios 实例，并为其配置默认设置，如 baseURL、超时时间、请求头等。

const axios = require('axios');

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

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

4. 拦截器

Axios 提供了请求和响应拦截器，允许你在请求或响应被处理之前对其进行修改。

请求拦截器:

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

响应拦截器:

instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  console.log('Response Interceptor:', response);
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

5. 处理错误

Axios 提供了丰富的错误处理机制。你可以通过 .catch() 方法捕获并处理错误。

axios.get('https://api.example.com/nonexistent')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了状态码，且状态码在 2xx 范围之外
      console.error('Server responded with a status code:', error.response.status);
      console.error('Response data:', error.response.data);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('No response received:', error.request);
    } else {
      // 其他错误（如设置请求时出错）
      console.error('Error setting up request:', error.message);
    }
  });

6. 取消请求

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

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

axios.get('https://api.example.com/data', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

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

7. 并发请求

你可以使用 axios.all() 方法来处理并发请求。

const axios = require('axios');

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

axios.all([requestOne, requestTwo])
  .then(axios.spread((responseOne, responseTwo) => {
    console.log('Response from first request:', responseOne.data);
    console.log('Response from second request:', responseTwo.data);
  }))
  .catch(errors => {
    console.error('Errors occurred:', errors);
  });

总结

Axios 是一个功能强大且易于使用的 HTTP 客户端，适用于各种场景。通过本文，你应该已经掌握了 Axios 的基本用法、配置选项、错误处理以及并发请求的处理方法。

本文地址：https://www.tides.cn/p_js-axios-tutorial