axios是前端Ajax请求库
在浏览器中发送Ajax请求到远程服务器，在nodejs中发送http请求到服务
支持promise
使用方式：npm或yarn安装、引入在线cnd
npm install axios
yarn add axios
https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
<!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">
<title>Document</title>
</head>
<body>
<div>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">POST请求</button>
<button onclick="testPut()">PUT请求</button>
<button onclick="testDelete()">DELETE请求</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
// 发送get请求方式1
function testGet() {
axios({
method: 'GET',
url: 'http://localhost:3000/posts',
}).then(Response => {
console.log(Response)
})
}
// 发送一个post请求
function testPost() { // 添加数据
axios({
method: 'post',
url: 'http://localhost:3000/posts',
data: {
title: "ssm",
author: "zs"
}
}).then(response => {
console.log(response)
})
}
// 发送一个put请求
function testPut() { // 更新数据
axios({
method: 'put',
url: 'http://localhost:3000/posts/2',
data: {
title: "springboot",
author: "ls"
}
}).then(response => {
console.log(response)
})
}
// 发送一个del请求
function testDelete() { // 删除数据
axios({
method: 'delete',
url: 'http://localhost:3000/posts/2'
}).then(response => {
console.log(response)
})
}
// 发送get请求方式2
function testGet1() {
axios.request({
method: 'get',
url: 'http://localhost:3000/posts'
}).then(response => {
console.log(response)
})
}
</script>
</body>
</html>
<!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>Document</title>
</head>
<body>
<div>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">POST请求</button>
<button onclick="testPut()">PUT请求</button>
<button onclick="testDelete()">DELETE请求</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
function testGet() {
axios.get('http://localhost:3000/posts') // 返回一个数组，数组里有两个对象
// axios.get('http://localhost:3000/posts/1') // 返回一个对象
// axios.get('http://localhost:3000/posts?id=1') // 返回一个数组，数组里有一个对象
.then(response => {
console.log('/posts get', response.data)
})
}
function testPost() { // 添加数据
axios.post('http://localhost:3000/posts', {"title": "json-server3", "author": "typicode" })
.then(response => {
console.log('/posts put', response.data)
})
}
function testPut() { // 更新数据
axios.put('http://localhost:3000/posts/3', {"title": "json-server_put", "author": "typicode" })
.then(response => {
console.log('/posts post', response.data)
})
}
function testDelete() { // 删除数据
axios.delete('http://localhost:3000/posts/3')
.then(response => {
console.log('/posts delete', response.data)
})
}
</script>
</body>
</html>
<!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>Document</title>
</head>
<body>
<div>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">POST请求</button>
<button onclick="testPut()">PUT请求</button>
<button onclick="testDelete()">DELETE请求</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
// 默认配置
axios.defaults.method = "GET";
axios.defaults.baseURL = 'http://localhost:3000';
axios.defaults.params ={id:1};
axios.defaults.timeout = 3000;
function testGet() {
axios({
url: '/posts'
}).then(Response => {
console.log(Response)
})
}
</script>
</body>
</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">
<title>Document</title>
</head>
<body>
<div>
<button onclick="testGet()">GET请求</button>
<button onclick="testPost()">POST请求</button>
<button onclick="testPut()">PUT请求</button>
<button onclick="testDelete()">DELETE请求</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>
function testGet() {
// 创建一个axios实例，使用时直接执行该实例的回调函数
const duanzi = axios.create({
baseURL: 'http://localhost:3000',
timeout: 2000
})
//创建多个实例
const duanzi2 = axios.create({
baseURL: 'http://192.168.0.102:8848',
timeout: 2000
})
// 执行回调
duanzi({
url: '/posts',
}).then(Response => {
console.log(Response)
})
}
</script>
</body>
</html>
