1.后端代码(express)
let express = require('express');
let app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS')
res.setHeader('Access-Control-Allow-Max-Age',5000)
if(req.method == 'OPTIONS'){
res.end()//OPTIONS请求不做任何处理
}
next();
})
app.get('/getdata1', (req, res) => {
console.log(req.headers)
res.end('11')
})
app.get('/getdata2', (req, res) => {
console.log(req.headers)
setTimeout(function(){
res.end('22')
},2000)
})
app.get('/getdata3', (req, res) => {
console.log(req.headers)
res.end('33')
})
app.get('/getdata4', (req, res) => {
console.log(req.headers)
res.end('44')
})
app.listen('4000')
2.前端html代码(运行在http://localhost:3000)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios.get('http://localhost:4000/getdata1').then(function(data){
console.log(data)
return axios.get('http://localhost:4000/getdata2')
}).then(function(data1){
console.log(data1)
return axios.get('http://localhost:4000/getdata3')
}).then(function(data2){
console.log(data2)
return axios.get('http://localhost:4000/getdata4')
}).then(function(data3){
console.log(data3)
return '请求完毕'
}).then(function(end){
console.log(end)
}).catch(function(err){
console.log(err)
}).finally(function(){
//不管成功或失败都会执行
console.log('end')
})
</script>
</body>
</html>
3.运行结果