axios
Axios 是一个 基于 promise 的 HTTP 客户端,适用于 node.js 和浏览器。它是 同构的(即它可以使用同一套代码运行在浏览器和 nodejs 中)。在服务器端它使用原生的 node.js http 模块,在客户端(浏览器)它使用 XMLHttpRequests。
1、怎么用axios?
1.1、先使用axios库,与服务器进行数据通信
-
基于XMLHttpRequest封装、代码简单、月下载量在14亿次
-
Vue、React项目中都会用到axios
1.2、再学习XMLHttpRequest对象的使用,了解Ajax底层原理
axios使用
1、引入axios.js:https://cdn,jsdelivr.net/npm/axios/dist/axios.min.js
2、使用axios函数
axios({
url:'目标资源地址'
}).then((result)=>{
//数据处理
})
2、认识URL
2.1、什么是URL
URL称为统一资源定位符,俗称网页地址,简称网址,是因特网上标准的资源的地址,用于访问网络资源,如同再网路上的门牌。
2.2、URL的组成
我们根据这个网址对URL进行分析http://hmajax.itheima.net/api/provice
- 协议
- http协议,是超文本传输协议(hyper text transfer protocol),规定浏览器和服务器之间传输数据的格式
- https协议
- 域名
- hmajax.itheima.net,标记服务器在互联网中的方位
- 资源路径
- /api/province,标记资源在服务器下的具体位置
3、URL查询参数
浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
axios({
url:'http://xxx.com/xxxx/xxx'
params:{
参数名1: 值1,
参数名2: 值2
}
}).then({
//数据处理
})
4、常用请求方法
请求方法:对服务器资源,要执行的操作
请求方法 | 操作 |
---|---|
GET | 获取数据 |
POST | 提交数据 |
PUT | 修改数据(全部) |
DELETE | 删除数据 |
PATCH | 修改数据(部分) |
4.1、axios请求配置
url:请求的URL网址
method:请求的方法,GET可以省略
data:提交数据
axios({
url: '',
method: '',
data:{
参数:值
}
}).then((result) => {
//数据处理
})
4.2、axios错误处理
当我们发起请求时可能会出现一些请求报错,这时候我们需要把请求报错的内容进行反馈给用户,这时候我们就需要进行错误处理,在then方法的后面,通过语法调用catch方法,传入回调函数并定义参数
axios({
url: '',
method: '',
data:{
参数:值
}
}).then(result => {
}).catch(error => {
//在这里我们可以对错误信息进行处理
})
5、HTTP协议
5.1、请求报文
HTTP协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照HTTP协议要求的格式,发送给服务器的内容
- 请求报文的格式
- 请求行:请求方法,URL,协议
- 请求头:以键值对的格式携带的附加信息
- 空行:分隔请求头,空行之后就是发送发送服务器的资源
- 请求体:发送的资源
在我们发起请求报文失败时,我们可以通过查看请求报文的内容,去排查请求内容的错误
5.2、响应报文
响应报文:服务器按照HTTP协议要求的格式,返回给浏览器的内容
-
响应报文的格式
-
响应行:协议、HTTP响应状态码、状态信息
-
响应头:以键值对的格式携带的附加信息
-
空行:分隔请求头,空行之后就是发送发送服务器的资源
-
响应体:返回的资源
-
HTTP响应状态码:用来表明请求是否成功
状态码 | 说明 |
---|---|
1xx | 信息 |
2xx | 成功 |
3xx | 重定向消息 |
4xx | 客户端错误 |
5xx | 服务端错误 |
6、接口文档
用于描述接口的文章,接口是使用Ajax和服务器通讯时,使用的URL,请求方法,以及参数
我们可以去了解这个网站https://apifox.com 在这个网站上我们可以进行Api接口测试
7、form-serialize插件
当我们在面临表单提交内容比较多的时候,我们需要传递的数据如果一个一个的赋值,这样时很费时费力的,这时候我们就可以使用form-serialize插件
//这个插件是从外部导入的,因此我们在使用过程中需要先下载插件的js文件并导入
<script src="./js/form-serialize.js"></script>
<script>
document.querySelector('.btn').addEventListener('click', () => {
const form = document.querySelector('.example-form')
//hash 设置获取数据解构 -true:JS对象;false:查询对象 enmpty 设置是否获取空置 -true:获取空值;false:不获取空值
const data = serialize(form, { hash: true, empty: true }) //返回的是对象,对象的属性名与input中的name属性一致
console.log(data)
const {username, password} = data
})
</script>
8、图片上传
1、获取图片文件对象
2、使用FormData携带图片文件
const fd = new FormData()
fd.append(参数名, 值)
3、提交到服务器,获取图片url网站使用