什么是Axios ?

2024-07-06 15:22:15

目录

一. 什么是Axios？

1.axios的特性

2.axios 的使用

二. Axios 的实际应用

1.axios请求的方式

2.axios的适用场景

三.Axios 和 ajax 的区别

1. axios 和ajax 的区别

2.两者各自的优缺点

一，什么是Axios？

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。

1.axios的特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

2.axios 的使用

首先要安装模块：

npm install axios

在cmd或者终端都可以运行代码，引入模块后可以直接使用。

二.Axios 的实际应用

例如：

// 发起一个post请求
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});

1.axios请求的方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.post(url[, data[, config]])

.......

注：axios的请求方式有很多，我们常用的get ,post 请求，其他的并不常用。想要了解更多可以去axios官网。

// 第一种方式  将参数直接写在url中axios.get('/getMainInfo?id=123').then((res) => {console.log(res)}).catch((err) => {console.log(err)})// 第二种方式  将参数直接写在params中axios.get('/getMainInfo', {  params: {id: 123}}).then((res) => {console.log(res)}).catch((err) => {console.log(err)})

2.axios的适用场景

在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。

三. Axios 和 ajax 的区别

1.两者各自的优缺点

axios的优点：

从浏览器中创建 XMLHttpRequest
支持 Promise API
从 node.js 创建 http 请求
转换请求和响应数据
自动转换JSON数据

axios的缺点：

ajax的优点：

无刷新更新数据

　　　　异步与服务器通信

　　　　前端和后端负载平衡

　　　　基于标准被广泛支持

　　　　界面与应用分离

ajax的缺点：

对搜索引擎不友好
要实现Ajax下的前后退功能成本较大
跨域问题限制

2..Axios 和 ajax 的区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注：传统Ajax 指的是 XMLHttpRequest（XHR），
　　axios和jQuer ajax都是对Ajax的封装、

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({baseURL: 'https://api.example.com'
});// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

什么是Axios ?相关推荐

前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
android post请求_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
Vue开发使用Axios遇到了大坑！
使用Vue的axios连接部分正常,部分不正常,服务器状态码200,服务器端控制台也不报错.但是页面请求就是报错.使用iPhone手机报错,换华为安卓手机也是一样的报错,安卓手机不知道怎么调试,使用m ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
偏前端 - vue-cli(axios请求数据==》token+按接口参数顺序（参数值拼接base64）- MD5)...
token+按接口参数顺序(参数值拼接base64)-> MD5) 请教于"喵咪",再此特别鸣谢!~ 特别强调:import qs from qs; 这个内部方法一定要用哦. ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为单页应用程序或单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
vue 网络请求 axios vue POST请求 vue GET请求代码示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 1.安装 axios 和 vue-axios 和 qs (qs是为了解决post默认使用的是x-www-f ...
vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
axios不发起请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与 ...

最新文章

热门文章