axios中的那些代码！

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);
  }));
​

思维导图

+------------------------------------------------------+
|                  Axios中的那些代码                    |
+------------------------------------------------------+
           |
           +-----------------------------+
           | 一、Axios简介               |
           +-----------------------------+
           |
           +-----------------------------+
           | 二、基本使用                |
           | 1. 安装Axios                |
           | 2. 发送GET请求              |
           | 3. 发送POST请求             |
           +-----------------------------+
           |
           +-----------------------------+
           | 三、请求与响应拦截器        |
           | 1. 添加请求拦截器           |
           | 2. 添加响应拦截器           |
           +-----------------------------+
           |
           +-----------------------------+
           | 四、取消请求                |
           +-----------------------------+
           |
           +-----------------------------+
           | 五、处理并发请求            |
           +-----------------------------+
​

总结

Axios为HTTP请求提供了一个强大的工具集，使得前端开发中与服务器通信变得更加简单和高效。通过掌握Axios的基础用法、拦截器、取消请求以及处理并发请求等高级功能，开发者可以大大提升开发效率和代码质量。希望本文能够帮助你更好地理解和使用Axios。