回到文章总目录
本篇文章介绍的内容为axios框架里面如何使用get，post，通用ajax方法请求。
axios是目前前端ajax中最热门的工具库，是vue和react官方推荐的ajax工具包
作用：
1.可以在node.js里面发送请求
2.支持Promise API （es6新推出的异步编程的解决方案）
3.拦截器机制
4.数据转换
5.取消请求
6.自动转化为json
7.安全相关的防护
归根结底还是用来发送ajax请求的
我们不在npm里面安装了，直接使用cdn链接（直接把链接放到htnl里面）
1.未压缩，可以方便理解版本
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
2.压缩版
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
GET请求 1路由 2其他设置axios.get(url[, config])
POST请求 1路由 2 参数(请求体) 3其他设置axios.post(url[, data[, config]])
注意一
post请求方法的请求体 将会被转换未json格式字符串传递过去
详细解释在案例代码里面
案例代码
1.创建在testseleven文件夹并在这个文件夹里面
2.创建simpel.html文件
3.创建server.js文件
simpel.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 存放Axios链接 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<!-- 添加允许跨源属性获取链接 向该链接发送请求的时候不会发送当前域名下的cookies 一般当前域名的cookies存放着你的帐号密码-->
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
<title>Axios发送ajax请求</title>
</head>
<body>
<button style="background-color: tomato;">GET</button>
<button style="background-color: tomato;">POST</button>
<button style="background-color: violet;">通用Ajax</button>
<div id="result" style="width: 180px;height: 100px;border: solid 2px teal;"></div>
<script>
// 把所有的按钮标签都选择
const btns = document.querySelectorAll('button');
// 配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';
// 第一个按钮
btns[0].onclick = function(){
// GET请求
axios.get('/axiosget', {
// url 参数
params: {
id: 100,
name: 999
},
// 请求头信息
headers:{
sex: 'boy',
age: 999
}
// axios数据返回和处理和jquery不一样，
// jquery使用的是回调函数
// axios使用的是基于Promise .then(value => {};) 箭头函数
}).then(value =>{
console.log(value);
})
}
// 第二个按钮
btns[1].onclick = function(){
// POST请求 axios.post('1.路由',{2.参数-请求体},{3.其他设置})
// 2.参数-请求体 将会被转换未json格式字符串传递过去
axios.post('/axiospost',{
username:'dayo',
password:'dayo'
},{
// url参数
params: {
id: 999,
vip: 999
},
// 请求头参数
headers:{
height:999,
weight:999
}
// 打印返回来的数据
}).then(value =>{console.log(value);})
}
// 第三个按钮
btns[2].onclick =function(){
axios({
// 请求方法
method: 'POST',
// url
url: '/axios-server',
// url参数
params: {
vip: 999,
level: 999
},
// 请求头信息
headers: {
a: 999,
b: 999
},
// 请求体信息
data: {
username: 'dayo',
password: 'dayo'
}
// 打印响应的所有信息
}).then(response=>{console.log(response);
// 另外打印响应状态码
console.log(response.status);
// 响应状态字符串
console.log(response.statusText);
// 响应头信息
console.log(response.headers);
// 响应体
console.log('响应体:',response.data);
})
}
</script>
</body>
</html>
server.js文件
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all 表示可以接收任意类型的请求 如get post 等等
// 一：get请求
app.all('/axiosget', (request, response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
response.send('get请求成功，服务端非json数据返回，返回的是字符串格式.');
});
// 二 ：post请求json数据
app.all('/axiospost', (request, response)=>{
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头 *号表示所有的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers','*');
// 响应一个数据 把这个对象返回给浏览器
const data = {
name: 'post请求，服务端设置了json格式返回 '
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
setTimeout(()=>{response.send(str);},200);
});
// 三：axios通用ajax请求 json数据
app.all('/axios-server', (request, response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {
name: 'axios通用ajax请求的post请求方法，服务端设置了json格式返回'
};
let str = JSON.stringify(data);
setTimeout(()=>{response.send(str);},200);
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});