使用(Ajax原理)Promise + XHR实现请求数据

使用Promise + XHR获取省份列表

---

步骤：

* 1. 创建Promise对象

* 2. 执行XHR异步代码，获取省份列表

* 3. 关联成功或失败函数，做后续处理

---

代码示例

<script>// 1. 创建Promise对象const p = new Promise((resolve,reject) => {// 2. 执行XHR异步代码，获取省份列表const xhr = new XMLHttpRequest()xhr.open('GET','http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend',() => {// 查看响应状态码// console.log(xhr.status)if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))  //字符串转对象} else {// 错误我们需要创建一个错误实例对象，并且给构造函数传递错误信息。当实现传递给对调函数reject(new Error(xhr.response))  }})xhr.send()})// 3. 关联成功或失败函数，做后续处理p.then(result => {document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {// 服务器返回的错误信息返回给页面document.querySelector('.my-p').innerHTML = error.message})</script>

关于需要携带"查询"参数的代码封装
在发送请求前进行操作

        //  1. 判断有params选项，携带查询参数if (config.params) {// 2. 使用URLSearchParams转换，并携带到url上const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()// 把查询参数字符串，拼接在url后面config.url += `?${queryString}`}//调用封装的函数，传递实参配置对象myAxios({url:'http://hmajax.itheima.net/api/area',params: {pname: '辽宁省',cname: '大连市'}})

---

**关于需要“请求”参数的代码封装** 注意代码插入的位置。

        // 1. 判断有data选项，携带请求体if (config.data) {// 2. 转换数据类型，在send中发送const urlStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-type','application/json')xhr.send(urlStr)} else (xhr.send())})}// 3. 使用myAxios函数，完成注册用户myAxios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {usename: 'itheima10',password: '99999999'}}).then(result => {console.log(result)}).catch(error => {console.dir(error)  })})

---

**代码综合**

<script>
function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()// 判断查询参数if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})// 1. 判断有data选项，携带请求体if (config.data) {// 2. 转换数据类型，在send中发送const urlStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-type','application/json')xhr.send(urlStr)} else (xhr.send())})}document.querySelector('.reg-btn').addEventListener('click', () => {// 3. 使用myAxios函数，完成注册用户myAxios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {usename: 'itheima10',password: '99999999'}}).then(result => {console.log(result)}).catch(error => {console.dir(error)  })})</script>