什么是axios？
axios是一个基于promise的http库，可以用来发送get和post请求
axios的特性（转）
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击
axios的使用案例
因为是对ajax的封装，所以案例需要涉及到node的使用，来实现前端和服务端的交互。
先设置前端页面，设置三个button分别来演示axios中的get方法，post方法和通用方法。
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
const btns = document.querySelectorAll('button');
//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].onclick = function(){
//get请求
axios.get('/axios-server', {
//url 参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
age: 22,
name: 'ryan'
}
}).then(value => {
console.log(value);
})
}
btns[1].onclick = function(){
axios.post('/axios-server', {
//请求体
data: {
username: 'admin',
password: '123'
}
}, {
//url 参数
params: {
id: 100,
vip: 7
},
//请求头信息
headers: {
age: 22,
name: 'ryan'
}
}).then(response => console.log(response))
}
btns[2].onclick = function(){
axios({
method: 'POST',
url: '/axios-server',
params: {
vip: 10,
level: 30
},
headers: {
a: 100
},
data: {
username: 'admin',
password: 'admin'
}
}).then(
response => {
console.log(response)
console.log(response.status)
console.log(response.statusText)
console.log(response.headers)
console.log(response.data)
},
err => {
console.log(err.message)
}
)
}
</script>
</body>然后新建一个js文件，用node建立一个简单服务端，并在终端中用node server.js 启动服务
//引入express
const express = require('express');
//创建应用对象
const app = express();
//axios
app.all('/axios-server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {name : 'Ryan', age: '22'};
response.send(JSON.stringify(data));
})
//监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中")
})这个时候打开页面，点击ajax按钮，就能在console中看到从服务端发过来的数据啦～
什么是fetch？
fetch是XMLHttpRequest的改进，浏览器中原生自带这个对象
fetch和axios的对比
相同点：两者都是基于promise来发送ajax请求
不同点：
- axios是对XHR的封装，而fetch是XHR的升级版
- fetch是通过数据流stream对象来处理数据，有利于提高网站性能表现，尤其是在请求大文 件和网速慢的情况下体验会比较好
fetch案例
和axios类似，我们先看看前端部分，区别不大，但是无法自动转换json对象，需要手动调用
<body>
<button>fetch AJAX请求</button>
<script>
const btn = document.querySelector('button')
btn.onclick = function(){
fetch('http://127.0.0.1:8000/fetch-server', {
method: 'POST',
headers: {
a: 100
},
body: 'username=admin&pwd=admin'
}).then(response => {
return response.json();
}).then(response => {
console.log(response)
})
}
</script>
</body>接下来是服务端部分，只要把url改掉就行，其余都一样
//引入express
const express = require('express');
//创建应用对象
const app = express();
//fetch
app.all('/fetch-server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {name : 'Ryan', age: '22'};
response.send(JSON.stringify(data));
})
//监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中")
})最后的结果当然也是成功返回了数据
总结
axios是一个封装XHR的ajax库，被推荐使用在vue和react中，是目前前端开发人员的必备技能，fetch是XHR的原生改进版，也有自己的优势，但目前还不是主流，可以了解。
两者都是基于promise进行异步操作。
请求格式大同小异，都是类似axios(url字符串, {content})，结果是返回一个promise对象，可以在后面接then方法来导出response中的数据（fetch方法多一步json化数据）