前端前置——ajax

目标：使用axios库，获取省份列表数据，展示到页面上

axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

省份数据地址：http://hmajax.itheima.net/api/province

axios的使用

axios({

url:'目标资源地址'

}).then(result)=>{

//对服务器返回的数据做后续处理

})

url告诉axios去哪个地址进行数据交互；result回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p class="my-p"></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url:'http://hmajax.itheima.net/api/province'}).then(result => {// console.log(result.data.list)//js中 join方法用于把数组中的所有元素放入一个字符串; 元素是通过指定的分隔符进行分隔的document.querySelector(".my-p").innerHTML = result.data.list.join('<br>')})</script>
</body>
</html>

axios — 查询参数

语法：使用axios提供的params选项

axios({

url:'目标资源地址',

params:{

参数名：值

}

}).then(result => {

//对服务器返回的数据做后续处理

})

这里axios在运行时会把参数名和值拼接到url?参数名=值

常用请求方法

GET：获取数据

POST：提交数据

PUT：修改全部数据

DELETE：删除数据

axios请求配置

url:请求的URL网址

method:请求的方法；其中GET可省

data:提交的数据

获取数据和提交数据的区分

获取数据：

axios({

url：'目标资源地址',

method：'get',

params：{

参数名：值

}

}）

提交数据：

axios({

url：'目标资源地址',

method：'post',

data：{

参数名：值

}

}）

axios中的错误处理

场景：再次注册相同的账号，会遇到报错信息

需求：使用axios错误处理语法，拿到报错信息，弹框反馈给用户

语法：

axios({

}).then(result => {

//处理数据

}).catch(error => {

//处理错误

})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>document.querySelector('.btn').addEventListener('click',()=>{axios({url:'http://hmajax.itheima.net/api/register',method:'post',data:{username:'itheima009',password:'76543210'}}).then(result=>{// console.log(result.data.message)alert(result.data.message)}).catch(error=>{// console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body>
</html>