一.图片上传
1.获取图片文件对象
2.使用FormData携带图片文件
const fd = new FormData()
fd.append(参数名, 值)
3.提交表单数据到服务器,使用图片url网址
二.AJAX原理—XMLHttpRequest
定义:XMLHttpReques(XHR)对象用于与服务器交互。通过XMLHttpRequest可以不断刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用
关系:axios内部采用XMLHttpRequest与服务器交互
好处:掌握使用XHR与服务器进行数据交互,了解axios内部原理
使用XMLHttpRequest
步骤:
1.创建XMLHttpRequest
2.配置请求方法和请求url地址
3.监听loadend时间,接收响应结果
const xhr = new XMLHttpRequest()
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {console.log(xhr.respone)
})
xhr.send()
三.Promise-三种状态
作用:了解Promise对象如何关联的处理函数,以及代码执行顺序
概念:一个Promise对象,必然处于以下几种状态之一
待定(pending):初始状态,既没有被兑现,也没有被拒绝
已兑现(fulfilled):意味着,操作成功完成
已拒绝(rejected):意味着,操作失败
注意:Promise对象一旦被兑现/拒绝就是已敲定了,状态无法再被改变
四.封装_简易axios_获取省份列表
需要:基于Promise+XHR封装myAxios函数,获取省份列表展示
步骤:
1.定义myAxios函数,接收配置对象,返回Promise对象
2.发起XHR请求,默认请求方法为GET
3.调用成功/失败的处理程序
4.使用myAxios函数,获取省份列表展示
五.封装_简易axios_获取地区列表
需求:修改myAxios函数支持传递查询参数,获取“辽宁省”,“大连市”对应列表展示
步骤:
1.myAxios函数调用后,传入params选项
2.基于URLSearchParams转换查询参数字符串
3.使用自己封装的myAxios函数展示地区列表
六.封装_简易axios_注册用户
需求修改myAxios函数支持传递请求体数据,完成注册用户功能
步骤:
1.myAxios函数调用后,判断data选项
2.转换数据类型,在send方法中发送
3.使用自己封装的myAxios函数完成注册用户功能