Axios 使用教程合集，从入门到进阶

Axios 是一个基于 Promise 的 HTTP 客户端请求库，可以在浏览器和 Node.js 环境下使用。它的功能强大且易于使用，能够帮助开发者轻松实现各种 HTTP 请求，本教程将从基础入门到高级使用，全面讲解 Axios 的各种功能和用法。

1. 什么是 Axios？如何使用 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端请求库，既可以在浏览器中使用，也可以在 Node.js 环境下使用。它提供了一套简洁的 API 来发起 HTTP 请求，处理请求和响应，并支持各种高级功能如拦截器、取消请求、文件上传等。

2. Axios 的 GET 请求如何使用？传参写法有哪几种？

GET 请求是最常见的 HTTP 请求类型，Axios 提供了简单的方法来发起 GET 请求。可以通过 URL 参数、params 对象等多种方式传递参数：

axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

3. Axios 的 POST 请求如何使用？传参写法有哪几种？

POST 请求通常用于提交数据，Axios 支持多种数据传递方式，包括普通对象、FormData 对象和 URLSearchParams 对象：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

4. Axios 的 PUT 请求如何使用？传参写法有哪几种？

PUT 请求用于更新资源，Axios 允许通过多种方式传递数据，例如拼接 URL、使用 params 参数或将数据作为请求体传递：

axios.put('/user/123', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

5. Axios 的 DELETE 请求如何使用？传参写法有哪几种？

DELETE 请求用于删除资源，传参方式包括在 URL 中传递参数、使用 params 参数等：

axios.delete('/user/123')
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

6. Axios 中如何设置请求头（headers）

设置请求头可以在请求配置中添加 headers 字段，也可以通过默认 headers 全局配置：

axios.get('/user', {
    headers: {
        'Authorization': 'Bearer token'
    }
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

7. Axios 的响应拦截器如何使用？

响应拦截器允许在请求得到响应后，对响应数据进行处理。例如，可以在响应发送回执行环境之前，修改、过滤响应数据：

axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

8. Axios 的请求拦截器如何使用？

请求拦截器可以在请求发出之前对其进行处理，例如添加公共请求头、打印日志等：

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

9. Axios 的 baseURL 怎么配置？

baseURL 配置可以简化请求路径，四种配置方法包括全局配置、实例化配置、临时配置和通过拦截器动态配置：

axios.defaults.baseURL = 'https://api.example.com';

10. Axios 如何取消重复请求？取消重复请求方法有哪几种？

通过请求拦截器与响应拦截器结合使用，或利用 Axios CancelToken 实现取消重复请求的方法：

const source = axios.CancelToken.source();

axios.get('/user/12345', {
    cancelToken: source.token
});

// 取消请求
source.cancel('取消重复请求');

11. Axios 并发请求怎么实现？

实现并发请求的三种方法包括使用 Promise.all()、async/await 和 Axios 提供的 axios.all() 方法：

function getUserAccount() {
    return axios.get('/user/12345');
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
.then(response => {
    console.log(response);
});

12. Axios 怎么通过 FormData 对象上传文件？

通过 FormData 上传文件的两种方法：直接追加文件到 FormData 中和设置 Content-Type 为 multipart/form-data：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/file/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

13. Axios 的流式(stream)请求怎么实现？

通过监听响应对象的 data 事件，可以实现流式请求，主要的写法有直接 pipe 流和手动监听事件：

axios({
    method: 'get',
    url: '/stream',
    responseType: 'stream'
})
.then(response => {
    response.data.pipe(fs.createWriteStream('response.txt'));
});

14. Axios Blob 如何使用？

Blob（二进制对象）是一种表示二进制数据的方式，常用于处理文件和多媒体数据。可以在 Axios 请求中指定响应类型为 Blob：

axios.get('/file', { responseType: 'blob' })
.then(response => {
    const blob = new Blob([response.data], { type: 'application/pdf' });
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = 'file.pdf';
    link.click();
});

15. Axios 跨域怎么解决？

解决跨域问题的常用方法有 CORS、JSONP、代理等。在开发环境中，可以通过代理服务器实现跨域：

axios.get('/api/data', {
    proxy: {
        host: '127.0.0.1',
        port: 9000
    }
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});