使用(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>