Axios中的那些代码

一、Axios简介

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它能够用于执行HTTP请求，支持拦截请求和响应、取消请求、自动转换JSON数据等功能。其强大的功能和简洁的API设计，使得Axios成为前端开发中广泛使用的HTTP客户端。

二、基本使用

1. 安装Axios

在项目中使用Axios前，需要先进行安装。可以使用npm或yarn进行安装：

npm install axios
# 或者
yarn add axios

2. 发送GET请求

发送GET请求是Axios最常见的用法之一。以下是一个简单的示例：

import axios from 'axios';

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

3. 发送POST请求

Axios也可以用于发送POST请求，并且可以发送复杂的数据结构：

import axios from 'axios';

axios.post('https://api.example.com/data', {
    name: 'John Doe',
    age: 30
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

三、请求与响应拦截器

拦截器允许在请求或响应被 then或 catch处理前拦截它们。这在处理统一的错误响应、添加请求头等场景中非常有用。

1. 添加请求拦截器

请求拦截器可以在请求发出前对其进行修改：

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer token';
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

2. 添加响应拦截器

响应拦截器可以在响应数据到达之前对其进行处理：

axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {
  // 对响应错误做些什么
  if (error.response.status === 401) {
    // 处理401错误
    console.error('Unauthorized, redirect to login');
  }
  return Promise.reject(error);
});

四、取消请求

使用Axios，可以在请求进行中取消请求。可以通过 CancelToken来实现这一点：

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

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

// 取消请求
cancel('Operation canceled by the user.');

五、处理并发请求

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

import axios from 'axios';

function getUser() {
  return axios.get('https://api.example.com/user');
}

function getAccount() {
  return axios.get('https://api.example.com/account');
}

axios.all([getUser(), getAccount()])
  .then(axios.spread((userResponse, accountResponse) => {
    console.log('User:', userResponse.data);
    console.log('Account:', accountResponse.data);
  }));