1:明确axios函数的使用语法
axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据做后续处理
})
2:axios 如何携带查询参数
--使用 params 选项即可,URL查询参数用处是浏览器提供给服务器额外信息,获取对应的数据
axios({
url: '目标资源地址',
params: {
参数名: 值(参数和值都一样的话 可以省略一个)
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
3.常用请求方法和数据提交
--请求方法是一些固定单词的英文,例如:GET,POST,PUT,DELETE,PATCH(这些都是http协议规定的),每个单词对应一种对服务器资源要执行的操作
-- get 获取数据
-- post 数据提交
-- put 修改数据 (全部)
-- delete 删除数据
-- patch 修改数据 (部分)
4.axios 如何提交数据到服务器?
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
5.axios 的核心配置项
---url:目标资源地址,method:请求方法,params:查询参数,data:提交的数据
6.axios 错误处理
--如果注册相同的用户名,则会遇到注册失败的请求,也就是 axios 请求响应失败了,可以在控制台看,普通用户不会去控制台里看错误信息,我们要编写代码拿到错误并展示给用户在页面上
--使用 axios 的 catch 方法,捕获这次请求响应的错误并做后续处理
axios({
// ...请求选项
}).then(result => {
// 处理成功数据
}).catch(error => {
// 处理失败错误
})
7.form-serialize 插件
-使用 form-serialize 插件,快速收集目标表单范围内表单元素的值
-form-serialize 插件语法:
1. 引入 form-serialize 插件到自己网页中
-(例)<script src="./lib/form-serialize.js"></script>
2. 使用 serialize 函数
- 参数1:要获取的 form 表单标签对象(要求表单元素需要有 name 属性-用来作为收集的数据中属性名)
- 参数2:配置对象
- hash:
- true - 收集出来的是一个 JS 对象结构
- false - 收集出来的是一个查询字符串格式
- empty:
- true - 收集空值
- false - 不收集空值
(例) const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true })
8.删除 修改 告知服务器要删除的数据id 调用删除接口
-(例)`http://hmajax.itheima.net/api/books/${theId}`
9.图片上传
-本地图片上传到网页上显示
-先依靠文件选择元素获取用户选择的本地文件,接着提交到服务器保存,服务器会返回图片的 url 网址,然后把网址加载到 img 标签的 src 属性中即可显示
-图片上传怎么做: 1.获取图片文件对象
2 FormData 表单数据对象装入(因为图片是文件而不是以前的数字和字符串了所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递(可以查看请求体-确认请求体结构)
3.const fd = new FormData() fd.append(参数名, 值)
4. fd.append('img', e.target.files[0])
-先用文件选择元素,获取到文件对象,然后装入 FormData 表单对象中,再发给服务器,得到图片在服务器的 URL 网址,再通过 img 标签加载图片显示