快速上手Axios：前端开发者必备技能

一、什么是Axios？

Axios是一个简单的HTTP客户端，通过它可以轻松发送异步请求。它在捕获响应数据、错误处理、请求拦截、取消请求等方面简化了许多复杂的细节。

二、安装Axios

1. 使用npm或yarn安装

bash 复制代码

# 使用npm
npm install axios

# 使用yarn
yarn add axios

三、发送你的第一次请求

1. 发起GET请求

javascript 复制代码

// GET请求的基本形式
const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('数据获取成功:', response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

2. 发起POST请求

javascript 复制代码

// 使用POST请求发送数据
const axios = require('axios');

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Axios入门',
    body: '学习如何使用Axios',
    userId: 1
})
    .then(response => {
        console.log('数据提交成功:', response.data);
    })
    .catch(error => {
        console.error('提交失败:', error);
    });

四、请求配置

Axios允许进行多种配置，以满足不同请求的需求。

javascript 复制代码

// 发送具有配置的请求
const axios = require('axios');

axios({
    method: 'get',
    url: 'https://jsonplaceholder.typicode.com/posts',
    params: { userId: 1 }, // 查询参数
    timeout: 5000, // 请求超时设置为5秒
    headers: { 'X-Custom-Header': 'foobar' } // 设置请求头
})
    .then(response => {
        console.log('配置请求成功:', response.data);
    });

五、拦截器的使用

Axios提供了拦截器功能，能在请求或响应被then或catch处理前拦截它们，进行统一的操作。

1. 请求拦截器

javascript 复制代码

const axios = require('axios');

axios.interceptors.request.use(config => {
    // 在请求被发送之前做处理
    config.headers.Authorization = 'Bearer YOUR_TOKEN_HERE';
    console.log('请求拦截成功:', config);
    return config;
}, error => {
    return Promise.reject(error);
});

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('数据获取成功:', response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

2. 响应拦截器

javascript 复制代码

const axios = require('axios');

axios.interceptors.response.use(response => {
    // 对响应数据进行处理
    console.log('响应拦截成功:', response);
    return response;
}, error => {
    // 对响应错误进行处理
    console.error('响应错误:', error.response);
    return Promise.reject(error);
});

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log('数据获取成功:', response.data);
    })
    .catch(error => {
        console.error('请求失败:', error);
    });

六、并发请求处理

通过axios.all可以同时发送多个请求，并在所有请求都完成后执行某个回调函数。

javascript 复制代码

const axios = require('axios');
const requestOne = axios.get('https://jsonplaceholder.typicode.com/posts');
const requestTwo = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([requestOne, requestTwo])
    .then(axios.spread((posts, users) => {
        console.log('POST数据:', posts.data);
        console.log('USER数据:', users.data);
    }));

七、取消请求

javascript 复制代码

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

axios.get('https://jsonplaceholder.typicode.com/posts', {
    cancelToken: source.token
})
    .catch(thrown => {
        if (axios.isCancel(thrown)) {
            console.log('请求已被取消:', thrown.message);
        }
    });

// 取消请求时
source.cancel('用户手动取消请求');

结语

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。