什么是axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。
axios的特征:
a.从浏览器中创建 XMLHttpRequest
b.从 node.js 发出 http 请求
c.支持 Promise API
e.拦截请求和响应
f.转换请求和响应数据
g.取消请求
h.自动转换JSON数据
axios请求
1.axios.get(url[, config]) 执行 GET 请求
eg:
// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.axios.post(url[, data[, config]]) 执行 POST 请求
eg:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios常用属性:
url
是用于请求的服务器 URL
通过url
以?的形式传递参数
method
是创建请求时使用的方法
baseURL
将自动加在 url
前面
headers
是即将被发送的自定义请求头:
headers: {'X-Requested-With': 'XMLHttpRequest'}
params
是即将与请求一起发送的 URL 参数 ;必须是一个无格式对象(plain object)或 URLSearchParams对象,请求参数拼接在URL上
通过params
形式传递参数
data
是作为请求主体被发送的数据;只适用于这些请求方法 ‘PUT’, ‘POST’, 和 ‘PATCH’;数据拼接在请求体中
一个完整的axios请求:
html页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
<title>Document</title>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
var 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: {
name: 'qqq'
},
}).then(value => {
console.log(value);
});
}
btns[1].onclick = function() {
axios.post('/axios-server', {
username: 'admin',
password: 'admin'
}, {
// URL参数
params: {
id: 200,
vip: 9
},
// 请求头
Headers: {
height: 180,
weight: 180
},
}).then(value => {
console.log(value);
});
}
btns[2].onclick = function() {
axios({
// 请求方法
method: 'POST',
// url
url: '/axios-server',
// url参数
params: {
vip: 10,
level: 30
},
// 请求头
Headers: {
a: 100,
b: 200
},
// 请求体
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);
})
}
</script>
</body>
</html>
server.js:
const express = require('express');
const app = express();
app.all('/axios-server', (require, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = { name: 'aaa' };
// response.send('HELLO jQuery AJAX');
response.send(JSON.stringify(data));
});
app.listen(8000, () => {
console.log('服务器已启动');
})
启动服务器之后:
点击各种按钮:
axios全局配置:
配置公共的请求头
axios.defaults.baseURL = 'https://127.0.0.1:3000/api'
配置超时时间
axios.defaults.timeout = 3000;
配置公共请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
配置公共的post的Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';