Axios JS是什么?如何用它进行高效的HTTP请求?

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js,它可以用来发送异步 HTTP 请求,包括 GET、POST、PUT、DELETE 等方法,以下是关于 Axios 的详细介绍:

1、安装与导入

安装:使用 npm 或 yarn 安装 Axios。

     npm install axios

或者

     yarn add axios

导入:在 JavaScript 文件中导入 Axios。

     import axios from 'axios';

2、发送请求

GET 请求:发送一个 GET 请求并获取数据。

     axios.get('https://jsonplaceholder.typicode.com/todos/1')
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

POST 请求:发送一个 POST 请求并传递数据。

     axios.post('https://jsonplaceholder.typicode.com/posts', {
       title: 'foo',
       body: 'bar',
       userId: 1,
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

其他请求:Axios 支持 PUT、DELETE 等其他 HTTP 方法。

     // PUT 请求
     axios.put('https://jsonplaceholder.typicode.com/posts/1', {
       body: 'updated body'
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));
     // DELETE 请求
     axios.delete('https://jsonplaceholder.typicode.com/posts/1')
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

3、配置请求

全局配置:设置默认的配置项,如 baseURL、timeout 等。

     import axios from 'axios';
     axios.defaults.baseURL = 'https://api.example.com';
     axios.defaults.timeout = 10000;
     axios.defaults.headers.common['Authorization'] = 'Bearer token';

局部配置:在每次请求时传入配置项。

     axios.get('/user/12345', {
       params: { id: 12345 },
       headers: { 'Content-Type': 'application/json' }
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

4、处理响应

成功响应:在.then 方法中处理成功的响应数据。

     axios.get('https://jsonplaceholder.typicode.com/todos/1')
       .then(response => {
         console.log(response.data);
         console.log(response.status);
         console.log(response.headers);
       })
       .catch(error => console.error(error));

错误处理:在.catch 方法中处理请求错误。

     axios.get('https://jsonplaceholder.typicode.com/todos/999')
       .then(response => console.log(response.data))
       .catch(error => {
         if (error.response) {
           console.error('Error Response:', error.response.data);
           console.error('Error Status:', error.response.status);
           console.error('Error Headers:', error.response.headers);
         } else if (error.request) {
           console.error('Error Request:', error.request);
         } else {
           console.error('Error Message:', error.message);
         }
       });

5、拦截器

请求拦截器:在请求发送前进行拦截处理。

     axios.interceptors.request.use(config => {
       console.log('Starting Request', config);
       return config;
     }, error => {
       return Promise.reject(error);
     });

响应拦截器:在响应返回后进行拦截处理。

     axios.interceptors.response.use(response => {
       console.log('Response Data:', response.data);
       return response;
     }, error => {
       return Promise.reject(error);
     });

6、取消请求

取消单个请求:使用CancelToken 来取消请求。

     const CancelToken = axios.CancelToken;
     let cancel;
     axios.get('https://jsonplaceholder.typicode.com/todos/1', {
       cancelToken: new CancelToken(function executor(c) {
         cancel = c;
       })
     })
       .then(response => console.log(response.data))
       .catch(thrown => {
         if (axios.isCancel(thrown)) {
           console.log('Request canceled', thrown.message);
         } else {
           console.error('Error', thrown);
         }
       });
     cancel('Request canceled by the user');

批量取消请求:可以创建一个数组来存储多个CancelToken,然后批量取消。

     const requests = [];
     for (let i = 0; i < 5; i++) {
       const cancelToken = axios.CancelToken.source();
       requests.push({ cancelToken: cancelToken, request: axios.get('https://jsonplaceholder.typicode.com/todos/' + (i + 1), { cancelToken: cancelToken.token }) });
     }
     requests[0].cancelToken.cancel('Batch cancel');

7、并发请求

使用axios.all 方法:同时发送多个请求,并在所有请求完成后统一处理结果。

     function getUserAccount() {
       return axios.get('/user/12345');
     }
     function getUserPermissions() {
       return axios.get('/user/12345/permissions');
     }
     axios.all([getUserAccount(), getUserPermissions()])
       .then(axios.spread((acct, perms) => {
         console.log('Account:', acct.data);
         console.log('Permissions:', perms.data);
       }))
       .catch(error => console.error(error));

使用Promise.all 方法:同样可以实现并发请求。

     Promise.all([axios.get('/user/12345'), axios.get('/user/12345/permissions')])
       .then(([acct, perms]) => {
         console.log('Account:', acct.data);
         console.log('Permissions:', perms.data);
       })
       .catch(error => console.error(error));

8、上传文件

使用 FormData:可以通过FormData 对象上传文件。

     const formData = new FormData();
     formData.append('file', file); // 假设 file 是用户选择的文件对象
     formData.append('name', 'John Doe');
     formData.append('age', 30);
     axios.post('/upload', formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

上传多个文件:可以在FormData 中添加多个文件。

     const formData = new FormData();
     formData.append('files[]', file1); // 假设 file1 是用户选择的第一个文件对象
     formData.append('files[]', file2); // 假设 file2 是用户选择的第二个文件对象
     formData.append('description', 'Sample files');
     axios.post('/uploadMultiple', formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

上传文件并附带额外数据:可以在FormData 中同时添加文件和其他数据。

     const formData = new FormData();
     formData.append('file', file); // 假设 file 是用户选择的文件对象
     formData.append('username', 'JohnDoe');
     formData.append('age', 30);
     axios.post('/uploadWithAdditionalData', formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

上传大文件:可以使用axiosonUploadProgress 事件来处理大文件上传进度。

     const formData = new FormData();
     formData.append('file', file); // 假设 file 是用户选择的文件对象
     formData.append('description', 'Large file upload');
     axios.post('/uploadLargeFile', formData, {
       headers: { 'Content-Type': 'multipart/form-data' },
       onUploadProgress: progressEvent => {
         console.log('Upload Progress:', Math.round(progressEvent.loaded / progressEvent.total * 100) + '%');
       }
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

上传二进制数据:可以直接上传二进制数据。

     const binaryData = new Blob(['Hello World!'], { type: 'text/plain' });
     const formData = new FormData();
     formData.append('file', binaryData, 'hello_world.txt');
     axios.post('/uploadBinary', formData, {
       headers: { 'Content-Type': 'multipart/form-data' }
     })
       .then(response => console.log(response.data))
       .catch(error => console.error(error));

各位小伙伴们,我刚刚为大家分享了有关“axios js”的知识,希望对你们有所帮助。如果您还有其他相关问题需要解决,欢迎随时提出哦!

原创文章,作者:K-seo,如若转载,请注明出处:https://www.kdun.cn/ask/655591.html

Like (0)
Donate 微信扫一扫 微信扫一扫
K-seo的头像K-seoSEO优化员
Previous 2024-11-18 12:51
Next 2024-11-18 12:55

相关推荐

  • Axias JS 是什么?探索这款 JavaScript 工具的功能与应用

    Axios JS: 一个强大的 HTTP 客户端库Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js,它支持各种功能,包括发送异步请求、处理响应、转换数据等,以下是对 Axios 的一些详细介绍:安装和使用安装在 Node.js 环境中,可以通过 npm 安装 Axios……

    帮助中心 2024-11-18
    03
  • 如何使用Axios进行POST请求并提交数据?

    axios post提交数据格式背景介绍axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js,它支持发送各种类型的请求,包括POST 请求,在POST 请求中,数据可以通过不同的格式进行提交,如application/x-www-form-urlencoded,multip……

    帮助中心 2024-11-18
    04
  • 如何正确使用Form Data API进行数据提交?

    Form Data API 写法详解1. 什么是 Form Data?Form Data 是一种编码格式,主要用于在 HTTP 请求中发送数据,尤其适用于在客户端与服务器间传输较为复杂的表单内容,如文字输入及文件上传,它支持多种类型的内容,并在上传文件时表现出高效的处理能力,2. 使用 Apifox 构建和测试……

    2024-12-16
    01
  • 如何在Vue项目中使用Axios进行HTTP请求?

    Axios.js在Vue中的使用Axios是一个基于Promise的HTTP客户端,用于发起浏览器和node.js的HTTP请求,在Vue项目中,Axios常用于与后端服务器进行数据交互,本文将详细介绍如何在Vue项目中引入并使用Axios,包括安装、全局配置、发送请求、错误处理以及实例创建等内容,一、引入Ax……

    帮助中心 2024-11-18
    01
  • 如何有效处理Axios.js中的异常情况?

    Axios 异常处理Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js,是处理异步请求的强大工具,在网络请求过程中,异常处理是不可避免的一部分,本文将详细探讨如何在使用 Axios 时进行有效的异常处理,并提供一些实用的示例代码,1. Axios 异常处理基础在使用 Ax……

    帮助中心 2024-11-16
    011
  • 如何高效地使用HTTP服务器进行数据传输?

    要使用HTTP服务器,你需要搭建一个服务器环境,如Apache、Nginx或Node.js等,并配置好相关设置。

    2024-10-17
    010

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

免备案 高防CDN 无视CC/DDOS攻击 限时秒杀,10元即可体验  (专业解决各类攻击)>>点击进入