Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。它支持多种请求方法，并且可以处理请求和响应的拦截器、取消请求、自动转换 JSON 数据等功能。

官网：https://www.axios-http.cn/docs/intro

安装

npm install axios
# 或者
yarn add axios

基本用法

发送 GET 请求

const axios = require('axios');

// 使用 async/await
async function fetchData() {
    try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
}

fetchData();

发送 POST 请求

const axios = require('axios');

const postData = async () => {
    try {
        const response = await axios.post('https://api.example.com/data', {
            key1: 'value1',
            key2: 'value2'
        });
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

postData();

配置请求参数

const axios = require('axios');

const fetchDataWithParams = async () => {
    try {
        const response = await axios.get('https://api.example.com/data', {
            params: {
                key1: 'value1',
                key2: 'value2'
            }
        });
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

fetchDataWithParams();

设置请求头

const axios = require('axios');

const fetchDataWithHeaders = async () => {
    try {
        const response = await axios.get('https://api.example.com/data', {
            headers: {
                'Authorization': 'Bearer your_token',
                'Content-Type': 'application/json'
            }
        });
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

fetchDataWithHeaders();

使用拦截器

拦截器可以在请求或响应被处理之前拦截它们。

const axios = require('axios');

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

// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做些什么
    console.log('Response Interceptor:', response);
    return response;
}, error => {
    // 对响应错误做些什么
    return Promise.reject(error);
});

const fetchData = async () => {
    try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
    } catch (error) {
        console.error(error);
    }
};

fetchData();

取消请求

可以使用 CancelToken 来取消请求。

const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;

const fetchData = async () => {
    try {
        const response = await axios.get('https://api.example.com/data', {
            cancelToken: new CancelToken(function executor(c) {
                cancel = c;
            })
        });
        console.log(response.data);
    } catch (error) {
        if (axios.isCancel(error)) {
            console.log('Request canceled', error.message);
        } else {
            console.error(error);
        }
    }
};

// 发送请求
fetchData();

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