文章目录
- axios体验
- axios-查询参数
- 常用请求方法
- 数据提交
- axios错误处理
axios体验
-
引入axios库
-
使用axios语法
axios({url: '目标资源地址' }).then((result)=>{// 对服务器返回的数据做后续处理 })
-
完整实例
<!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>AJAX概念和axios使用</title> </head><body> <!--axios库地址:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址:http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库 --> <p class="my-p"></p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result=>{console.log(result)console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表,插入到页面document.querySelector('.my-p').innerHTML= result.data.list.join('<br>')}) </script> </body> </html>
-
运行结果
axios-查询参数
- 语法:使用axios提供的params选项
axios({url: '目标资源地址',params:{参数名:值} }).then((result)=>{// 对服务器返回的数据做后续处理 })
- 注意:axios在运行时把参数名和值,会拼接到url
?参数名=值
-
demo
<!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>AJAX查询参数</title> </head><body> <!--axios库地址:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址:http://hmajax.itheima.net/api/city目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库 --> <p class="my-p"></p> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script>// 2. 使用axios函数axios({url:'http://hmajax.itheima.net/api/city',// 查询参数params:{pname:'贵州省'}}).then((result)=>{console.log(result.data.list)document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')}) </script> </body> </html>
-
运行结果
常用请求方法
- 请求方法:对服务器资源,要执行的操作
请求方法 操作 GET 获取数据 POST 提交数据 PUT 修改数据(全部) DELETE 删除数据 PATCH 修改数据(部分)
数据提交
axios请求配置
- url:请求的URL地址
- method:请求的方法,GET可以省略不写(不区分大小写)
- data:提交的数据
axios({url: '目标资源地址',method:'请求方法',data:{参数名:值} }).then((result)=>{// 对服务器返回的数据做后续处理 })
axios错误处理
语法:在then方法的后面,通过点语法调用catch方法,传入回调函数并定义形参
axios({// 请求选项
}).then(result=>{// 处理数据
}).catch(error=>{// 处理错误
})