2:AJAX中的XML和promise的基本使用

1：了解 AJAX 原理 XHR 的基础使用
    -(1). AJAX 是浏览器与服务器通信的技术，采用 XMLHttpRequest 对象相关代码
    -(2). axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数
    -(3). 学习 XHR 也是了解 axios 内部与服务器交互过程的真正原理
    语法:
        //创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest()
        //配置请求方法和请求 url 地址
        xhr.open('请求方法', '请求url网址')
        //监听 loadend 事件，接收响应结果
        xhr.addEventListener('loadend', () => {
              // 响应结果
              console.log(xhr.response)
        })
        //发起请求
        xhr.send()

2：使用XMLHttpRequest查询参数
    -查询参数原理要携带的位置和语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
    -在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值
    -（例）xhr.open('GET', 'url地址?参数名=值')

3:URLSearchParams的使用
    -但是多个查询参数，如果自己拼接很麻烦， URLSearchParams 能把参数对象转成“参数名=值&参数名=值“格式的字符串
    // 1. 创建 URLSearchParams 对象
    const paramsObj = new URLSearchParams({
          参数名1: 值1,
          参数名2: 值2
    })
    // 2. 生成指定格式查询参数字符串
    const queryString = paramsObj.toString()
    // 结果：参数名1=值1&参数名2=值2

4:使用XMLHttpRequest数据提交
    1):没有 axios 帮我们了，我们需要自己设置请求头 Content-Type：application/json，来告诉服务器端，我们发过去的内容类型是 JSON 字符串，让他转成对应数据结构取值使用
        -xhr.setRequestHeader('Content-Type', 'application/json')
    2):没有 axios 了，我们前端要传递的请求体数据，也没人帮我把 JS 对象转成 JSON 字符串了，需要我们自己转换
        -const user = { username: 'abc123', password: '666666' }
            const userStr = JSON.stringify(user)
    3):发送请求体数据
        -xhr.send(userStr)

5:Promise的使用
    -Promise 对象用于表示一个异步操作的最终完成（或失败）及其结构值
    -Promise 的好处是逻辑更清晰（成功或失败会关联后续的处理函数）让我们更了解 axios 函数内部运作的机制
    -1. new Promise 对象执行异步任务。
    -2. 用 resolve 关联 then 的回调函数传递成功结果。
    -3.用 reject 关联 catch 的回调函数传递失败结果。
        例):// 1. 创建 Promise 对象
            const p = new Promise((resolve, reject) => {
                // 2. 执行异步任务-并传递结果
                // 成功调用: resolve(值) 触发 then() 执行
                // 失败调用: reject(值) 触发 catch() 执行
            })
                // 3. 接收结果
            p.then(result => {
                    // 成功
            }).catch(error => {
                    // 失败
            })

6:Promise 的状态
    -1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
    -2. 已兑现（fulfilled）：操作成功完成
    -3. 已拒绝（rejected）：操作失败
    -4.  Promise 的状态改变有什么用：调用对应函数，改变 Promise 对象状态后，内部触发对应回调函数传参并执行
    -5.每个 Promise 对象一旦被兑现/拒绝，那就是已敲定了，状态无法再被改变

7:使用Promise和XML封装简易axios
    1. 创建 Promise 对象
    2. 执行 XHR 异步代码，获取省份列表数据
    3. 关联成功或失败回调函数，做后续的处理
        例）const p = new Promise((resolve,reject)=>{
            const xhr = new XMLHttpRequest()
            xhr.open('请求方法',url)
            xhr.addEventListener('loadend',()=>{
                //判断响应是否成功
                if (xhr.status >= 200 && xhr.status < 300) {
                         resolve(JSON.parse(xhr.response))
                    } else {
                          reject(new Error(xhr.response))
                    }
               })
            xhr.send()
             })
             p.then(result=>{
            //响应成功做后续处理
             }).catch(err=>{
            //响应失败 返回错误提示信息
             })
        
8:简易axios的补充
    -在封装函数可以判断是否传递了method，默认GET,
        -xhr.open(config.method || 'GET', config.url)
    -利用封装函数判断params选项
            //1. 判断有params选项，携带查询参数
        if (config.params) {
                  // 2. 使用URLSearchParams转换，并携带到url上
              const paramsObj = new URLSearchParams(config.params)
              const queryString = paramsObj.toString()
                  // 把查询参数字符串，拼接在url？后面
              config.url += `?${queryString}`
            }
        
9：封装简易axios的提交功能
    -1. myAxios 函数调用后，判断 data 选项
    -2. 转换数据类型，在 send 方法中发送
        // 1. 判断有data选项，携带请求体
            if (config.data) {
              // 2. 转换数据类型，在send中发送
                  const jsonStr = JSON.stringify(config.data)
                  xhr.setRequestHeader('Content-Type', 'application/json')
                  xhr.send(jsonStr)
            } else {
              // 如果没有请求体数据，正常的发起请求
                  xhr.send()
            }