目录
一. 什么是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);
});