本节目的
熟练使用axios
介绍
Axios是专注于网络数据请求的库
官网: Axios中文文档 | Axios中文网
基本使用
- 引入axios
- 使用axios函数, 传入配置对象, 接受服务器相应数据
- <body>
- <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) => {
- const res = result.data.list.join('<br />')
- document.querySelector('p').innerHTML = res
- })
- </script>
- </body>
url
同一资源定位符(URL), 简称网页地点, 是因特网上标砖的资源地点
例如
组成
协议
http协议: 超文本传输协议, 规定浏览器和服务器之间传输数据的格式
协议范围: http/https/...
域名
域名: 服务器在互联网中的唯一标识
端口
端口: 标记服务器里差别功能的服务程序
区分一台服务中的差别程序
说明
- 端口范围: 0-65535之间的恣意整数
- http协议, 默认访问80端口
- 0-1023和一些特定端口号已经被占用, 我们自己的服务程序要避开
资源路径
资源路径: 标记资源在服务器中的具体位置
查询参数
浏览器提供给服务器的额外信息, 让服务返回指定的数据
说明
- 指定格式: http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
- 在axios中: 通过params选项, 传送查询参数
示例
- <body>
- <p></p>
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- <script>
- // 需求: 请求资源地址, 展示数据到页面
- axios({
- url: 'http://hmajax.itheima.net/api/city',
- params: {
- pname: '山东省'
- }
- }).then((result) => {
- const res = result.data.list.join('<br />')
- document.querySelector('p').innerHTML = res
- })
- </script>
- </body>
请求方法
对服务器资源, 要实行的操纵
常用请求方法
- get 获取资源
- post 提交资源
- put 修改资源(全部)
- delete 删除资源
- patch 修改资源(不分)
说明
- 无论原生还是axios, 都是通过method选项, 配置请求方法
- get是默认的请求方式
body参数
浏览器提供给服务器的额外信息, 信息放在请求体内里
说明
- 无论原生还是axios, 都是通过data选项, 传递请求体参数
- post请求可以传递请求体参数,也可以传递查询参数
- get请求只能传递查询参数
示例
- <body>
- <button class="btn">注册用户</button>
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- <script>
- /*
- 目标: 点击按钮, 通过axios提交用户和密码, 完成注册
- */
- document.querySelector('.btn').addEventListener('click', function () {
- axios({
- url: 'http://hmajax.itheima.net/api/register',
- method: 'post',
- data: {
- username: 'wsdsg666',
- password: 'wsdsg666'
- }
- }).then((result) => {
- console.log(result);
- })
- })
- </script>
- </body>
错误处理
axios提供了catch函数, 可以捕捉请求出现的错误
说明
catch函数捕捉的是axios错误信息
示例
- <body>
- <button class="btn">注册用户</button>
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- <script>
- /*
- 目标: 处理请求可能出现的错误
- */
- document.querySelector('.btn').addEventListener('click', function () {
- axios({
- url: 'http://hmajax.itheima.net/api/register',
- method: 'post',
- data: {
- username: 'wsdsg666',
- password: 'wsdsg666'
- }
- }).then((result) => {
- // 成功
- console.log(result);
- }).catch((err) => {
- // 失败
- console.log(err)
- alert(err.response.data.message)
- })
- })
- </script>
- </body>
请求报文
浏览器按照HTTP协议的要求, 把信息按照固定格式, 整理成请求报文, 发送给服务器
组成
- 请求行: 包罗请求方式, 请求URL, 协议信息
- 请求头: 以键值对的格式携带附加信息, 重要的是Content-Type属性
- 请求空行: 作用是分割请求头和请求体
- 请求体: 携带给服务器的数据
相应报文
服务器按照HTTP协议的要求, 把信息按照固定格式, 整理成相应报文, 返回给浏览器
组成
- 相应行: 包罗协议信息, HTTP状态码, 状态信息
- 相应头: 以键值对的格式携带附加信息, 重要的是Content-Type属性
- 相应空行: 作用是分割相应头和相应体
- 相应体: 返回的数据
状态码: 用来表明请求的状态
接口文档
接口: 使用ajax请求数据时,被请求的url地点,就叫做数据接口
描述接口的文档, 记录了使用前后端交互需要的URL, 请求方式, 请求参数等信息
本课程的接口文档 欢迎使用 - B站-AJAX和黑马头条-数据管理平台
接口测试工具 Download Postman | Get Started for Free
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
