首页 > 其他分享 >Axios:轻松进行 HTTP 请求的强大工具

Axios:轻松进行 HTTP 请求的强大工具

时间:2024-08-23 09:26:27浏览次数:13  
标签:axios HTTP 请求 Axios error console response

在前端开发中,与服务器进行通信是非常常见的需求。无论是获取数据、发送表单,还是上传文件,HTTP 请求都扮演着重要角色。虽然 JavaScript 提供了原生的 fetch API 和 XMLHttpRequest,但它们在处理复杂请求时可能不太方便。这时候,Axios 作为一个基于 Promise 的 HTTP 客户端库,提供了更加简洁和强大的解决方案。

一、Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端,可以运行在浏览器和 Node.js 中。它具有以下特点:

  • 支持 Promise:使用异步请求时可以使用 async/await
  • 拦截请求和响应:可以在请求发送前或响应到达后进行处理。
  • 取消请求:支持通过 CancelToken 取消请求。
  • 自动转换 JSON 数据:请求和响应中的 JSON 数据会自动转换为 JavaScript 对象。
  • 客户端支持防御 XSRF:有助于保护应用免受跨站请求伪造(XSRF)的攻击。

二、安装 Axios

在使用 Axios 之前,需要先将其安装到你的项目中。你可以通过 npm 或 yarn 安装:

npm install axios

或者

yarn add axios

安装完成后,你可以在项目的 JavaScript 文件中导入 Axios:

import axios from 'axios';

三、基本使用方法

1. 发送 GET 请求

GET 请求通常用于从服务器获取数据。使用 Axios 发送 GET 请求非常简单:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

通过 axios.get(url) 发送请求,response.data 包含服务器返回的数据。

2. 发送 POST 请求

POST 请求用于向服务器发送数据。你可以通过 axios.post(url, data) 发送 POST 请求:

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

在这个例子中,我们将一个 JSON 对象发送到服务器,并打印返回的数据。

3. 发送 PUT 请求

PUT 请求通常用于更新服务器上的资源。类似于 POST 请求,你可以使用 axios.put(url, data) 发送 PUT 请求:

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  title: 'updated title',
  body: 'updated body',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

4. 发送 DELETE 请求

DELETE 请求用于删除服务器上的资源。使用 axios.delete(url) 发送 DELETE 请求:

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Post deleted:', response.data);
  })
  .catch(error => {
    console.error('There was an error!', error);
  });

四、高级用法

1. 请求和响应拦截器

Axios 允许你在请求或响应被 thencatch 处理之前拦截它们。这对于全局处理错误、设置通用的请求头部或记录日志非常有用。

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

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

2. 设置默认配置

你可以设置 Axios 的全局默认配置,如基 URL、请求超时时间、请求头等:

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

3. 取消请求

在某些情况下,你可能需要取消一个正在进行的请求,Axios 提供了 CancelToken 来实现这一功能:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/longRequest', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});

// 取消请求
cancel('Request canceled.');

4. 并发请求

如果你需要同时发送多个请求,并且在所有请求都完成后执行某些操作,可以使用 axios.allaxios.spread

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(acct.data);
    console.log(perms.data);
  }));

5. 上传文件

Axios 也可以轻松处理文件上传操作。你可以使用 FormData 对象来构建请求数据:

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

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
  .then(response => {
    console.log('File uploaded successfully:', response.data);
  })
  .catch(error => {
    console.error('There was an error uploading the file!', error);
  });

五、总结

Axios 是一个功能强大且易于使用的 HTTP 客户端,特别适合在现代 JavaScript 应用程序中进行网络请求。无论你是在处理简单的 GET 请求,还是在处理复杂的拦截器和文件上传,Axios 都提供了简洁的 API 和灵活的配置选项。

标签:axios,HTTP,请求,Axios,error,console,response
From: https://blog.csdn.net/qq_62512874/article/details/141453592

相关文章

  • Http 请求 header 大小写有区别吗?
    后端:参考:-java-APP莫名崩溃,开始以为是Header中name大小写的锅,最后发现原来是容器的错!-小航的技术笔记-SegmentFault思否Q:这么多获取Header的方式有什么区别?A:不同的容器下实现方式不同,这里列表说明undertowtomcatjetty请求参数大小写转换不变......
  • 安装metrics-server遇到Readiness probe failed HTTP probe failed with statuscode 5
    安装metrics-server后显示Running,但是READY状态一直为0/1,通过describe查询到如下内容Readinessprobefailed:HTTPprobefailedwithstatuscode:5001.报错内容root@master:~/metrics-server#kubectlgetpods-nkube-systemmetrics-server-dd7677d75-grfcqNAME......
  • C# HttpClient 公共类
    HttpClientService.cs:///<summary>///HTTP请求方法///兼容微信支付V3版本api请求///</summary>publicclassHttpClientService{privatestaticHttpClientService_instance;privatestaticreadonlyobject_lock=ne......
  • IIS: URL rewrite转发请求
    先检查本地是否存在IIS,存在则跳过IIS:启用IIS-le.li-博客园(cnblogs.com)双击打开"InternetInformationServices(IIS)管理器" 点击管理器名称 缺少“ApplicationRequestRouter”下载网址:https://www.iis.net/downloads/microsoft/application-request-routi......
  • 关于http基本认识
    一、概念引入HTTP协议是HyperTextTransferProtocol(超文本传输协议)的缩写,平时上网时,浏览器基本都是基于该协议与服务器通信的,HTTP是基于TCP/IP协议来传输数据的,包括HTTP文件、图片、查询结果等。HTTP是一个典型的C/S(即client-server)协议:请求通过一个实体被发出,实体也就是......
  • HTTP和RPC接口的区别?
        大家在面试的过程中,经常会被问到一个问题,那就是HTTP和RPC接口的区别,接下来,就跟随小k的步伐,一起来探究一下这两个接口的区别吧!    HTTP和RPC接口是两种常见的接口通信协议,本文将介绍他们的定义,区别和相似之处,应用场景。HTTP接口HTTP接口是一种应用层通信协......
  • LoadRunner 12.55 解决录制 HTTPS网站,脚本空白问题
    背景:最近工作中项目有性能测试需求,但团队小伙伴用loadrunner12.55遇到https站点录制出来的脚本Action为空白,以往处理方式直接让项目团队将https改成http再重新录制痛点:修改http耗时长分析:项目web主要是内网使用,使用自签名证书,而loadrunner无该证书导致LoadrunnerProxyServer......
  • 升级http协议
    map$http_upgrade$connection_upgrade{defaultupgrade;''close;}map指令:map指令用于创建一个变量映射。它根据一个变量的值来设置另一个变量的值。在这个例子中,它根据$http_upgrade变量的值来设置$connection_upgrade变量的值。$http_upgrade:这是一个内......
  • 异步交互技术Ajax-Axios
    目录一、同步交互和异步交互二、Ajax 1.概述2.如何实现ajax请求三、异步传输数据乱码的问题regist.html页面代码 服务端代码处理四、Axios1. Axios的基本使用(1)引入Axios文件(2)使用Axios发送请求,并获取响应结果。2.案例3.请求方法的别名(推荐用这个,简单)一、同......
  • http实现form表单带CSV附件上传,数据不落盘实现方式
    以往的印象里面,实现附件上传需要有附件在磁盘里面存在(可能是见识浅薄),想着怎么去优化一下,避免落盘,就引入了这种方式,实现很容易,只是没有实践过,实践导致认知限制<dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</arti......