<!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>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script>
// axios的使用
// 没写method配置项,默认是get请求
// 执行完axios()方法得到的是promise对象,所以可以在axios()方法后面使用.then().catch()
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(res => {
// 请求成功
console.log(res);
}).catch(error => {
// 请求失败
// 捕获异常
})
// 一、get请求
// query查询数据(属于get请求):需要params配置项,可以省略method配置项
axios({
// 浏览器控制台实际请求的url是这个:http://hmajax.itheima.net/api/city?pname=%E8%BE%BD%E5%AE%81%E7%9C%81
url: 'http://hmajax.itheima.net/api/city',
params: {
pname: '辽宁省'
}
}).then(res => {
console.log(res);
})
// 二、post请求
// 请求数据(属于post请求):1、需要data配置项,2、需要method配置项
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST', // post大小写都可以
data: {
username: "hello1111",
password: "123456"
}
}).then(res => {
console.log(res);
})
// 三、delete请求
// 删除数据(属于delete请求):1、路径需要带上参数值(下面是带上参数id的值),2、需要method配置项
const id = 1;
axios({
// 浏览器控制台实际请求的url是这个: http://hmajax.itheima.net/api/books/1
url: `http://hmajax.itheima.net/api/books/${id}`,
method: 'DELETE'
}).then(res => {
})
// 四、put请求
</script>
</body>
</html>
28、js - axios的基本使用
于 2023-06-07 10:37:17 首次发布