ToB企服应用市场:ToB评测及商务社交产业平台
标题:
[JS]Axios
[打印本页]
作者:
缠丝猫
时间:
2024-9-16 08:19
标题:
[JS]Axios
本节目的
熟练使用axios
介绍
URL
HTTP
介绍
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
请求报文
浏览器按照HTTP协议的要求, 把信息按照固定格式, 整理成请求报文, 发送给服务器
组成
请求行: 包罗请求方式, 请求URL, 协议信息
请求头: 以键值对的格式携带附加信息, 重要的是Content-Type属性
请求空行: 作用是分割请求头和请求体
请求体: 携带给服务器的数据
相应报文
服务器按照HTTP协议的要求, 把信息按照固定格式, 整理成相应报文, 返回给浏览器
组成
相应行: 包罗协议信息, HTTP状态码, 状态信息
相应头: 以键值对的格式携带附加信息, 重要的是Content-Type属性
相应空行: 作用是分割相应头和相应体
相应体: 返回的数据
状态码: 用来表明请求的状态
接口文档
接口: 使用ajax请求数据时,被请求的url地点,就叫做数据接口
描述接口的文档, 记录了使用前后端交互需要的URL, 请求方式, 请求参数等信息
本课程的接口文档 欢迎使用 - B站-AJAX和黑马头条-数据管理平台
接口测试工具 Download Postman | Get Started for Free
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4
