前端HTTP请求库axios详解

Axios 是一个基于 promise 的 HTTP 库，它在浏览器和 node.js 中都可以使用。以下是一些常见的使用方法和示例代码：

1. 发送 GET 请求：

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

2. 发送 POST 请求：

axios.post('http://api.example.com/data', {
    key1: 'value1',
    key2: 'value2'
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});

3. 并发请求（同时发送多个请求）：

axios.all([
    axios.get('http://api.example.com/data1'),
    axios.get('http://api.example.com/data2')
])
.then(axios.spread((response1, response2) => {
    console.log(response1.data);
    console.log(response2.data);
}))
.catch(error => {
    console.error(error);
});

4. 请求配置：

axios.get('http://api.example.com/data', {
    params: {
        ID: 12345
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});

5. 取消请求：

const source = axios.CancelToken.source();
 
axios.get('http://api.example.com/data', {
    cancelToken: source.token
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
    } else {
        console.error(error);
    }
});
 
// 取消请求
source.cancel('Operation canceled by the user.');

6. 设置默认配置：

axios.defaults.baseURL = 'http://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer YOUR_TOKEN';
axios.defaults.timeout = 10000;

7. 拦截器：

// 添加请求拦截器
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

以上是一些常用的 Axios 功能和示例代码，实际使用时可以根据具体需求选择合适的方法和配置。