什么是Axios

本文深入解析了Axios作为前端和后端通用的HTTP库,介绍了其Promise API、拦截机制、数据转换、取消请求及浏览器支持。通过实例演示如何安装和使用Axios进行常见操作,如GET、POST等。

1、Axios是什么?

                 Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端。

2、Axios特性

(1)支持Promise API

(2)拦截请求与响应,比如:在请求前添加授权和响应前做一些事情。

(3)转换请求数据和响应数据,比如:进行请求加密或者响应数据加密。

(4)取消请求

(5)自动转换JSON数据

(6)客户端支持防御XSRF

3、浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8+。


Axios基本使用

安装axios    npm install axios

import axios from "axios"
axios.get("/data.json").then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

Axios常用请求方法

  • get:一般用户获取数据
  • post:一般用于表单提交与文件上传
  • patch:更新数据(只将修改的数据推送到后端)
  • put:更新数据(所有数据推送到服务端)
  • delete:删除数据

 

 

Axios 是一个基于 Promise 的 HTTP 客户端,适用于浏览器和 Node.js 环境,主要用于简化 HTTP 请求的发送和处理。它提供了对 GET、POST、PUT、DELETE 等常见 HTTP 方法的支持,并内置了对请求和响应的拦截、自动转换数据格式、客户端防御 XSRF 攻击等功能。Axios 的设计目标是提供一个简单、灵活且功能强大的 HTTP 请求库,适用于现代 Web 开发中的异步通信需求[^1]。 在浏览器端,Axios 通过 XMLHttpRequest 或 Fetch API 发送请求,同时兼容所有现代浏览器。它可以轻松集成到 Vue、React 等前端框架中,用于与后端服务进行数据交互。例如,在 Vue 中使用 Axios 发送 GET 请求的示例代码如下: ```javascript <script src="../axios/axios.min.js"></script> <script> axios.get('http://localhost:9999/student/student/getAllStudent') .then(res => { console.log(res); }) .catch(err => { console.log(err); }); </script> ``` 该示例展示了如何通过 Axios 获取远程数据并处理成功或失败的响应,体现了其基于 Promise 的异步处理特性[^2]。 在实际项目中,通常会将 Axios 引入为模块,并在入口文件中配置全局实例,以便在整个应用中便捷使用。例如,在 Vue 项目中,开发者可能会在 `main.js` 中引入 Axios 并挂载到 Vue 实例的原型上,从而在组件中通过 `this.$axios` 调用。然而,如果配置不当,可能会出现“this.$axios is not a function”或“adapter fetch is not ...”等错误,通常是因为未正确设置 Axios 的适配器或未正确绑定上下文[^4]。 此外,Axios 也可以通过 `<script>` 标签直接在 HTML 文件中引用,适用于简单的前端项目或快速原型开发。例如: ```html <script src="~/js/axios/axios.min.js"></script> ``` 该方式要求路径正确指向 Axios 的发布文件,并确保在使用前完成加载[^3]。 ### Axios 的优势 Axios 相较于传统的 XMLHttpRequest 或 jQueryAjax 方法,具备更强的可读性和更丰富的功能。其基于 Promise 的设计使得异步代码更易于组织和维护。同时,Axios 支持请求和响应拦截器,允许开发者在请求发送前或响应到达后统一处理,例如添加认证头、日志记录等。它还支持自动转换请求和响应数据(如 JSON 序列化与反序列化),并且具备客户端防御 CSRF/XSRF 的能力。 此外,Axios 提供了取消请求的能力,允许开发者在特定条件下中止正在进行的请求,提升了应用的响应性和用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值