【ajax核心03】封装底层axios函数

目录

一：步骤总结

二：获取数据需求：

三：查找数据需求：

四：发送数据需求：

一：步骤总结

1. 定义myAxios函数，接收配置对象，返回Promise对象
2. 发送XHR请求，设置默认请求方式为GET
3. 调用成功/失败处理程序
4. 使用myAxios函数，获取数据

function myAxios(config){
    return new Promise((resolve,reject)=>{
        //XHR请求
        //调用成功/失败的处理程序
    })    
}
myAxios({
}).then(result=>{}).catch(error=>{})

其实底层部分源码框架是这样的，只不过不同的需求，往函数中传入的配置对象有些许不同

二：获取数据需求：

/**

     * 目标：封装_简易axios函数_获取省份列表

     *  1. 定义myAxios函数，接收配置对象，返回Promise对象

     *  2. 发起XHR请求，默认请求方法为GET

     *  3. 调用成功/失败的处理程序

     *  4. 使用myAxios函数，获取省份列表展示

    */

    //*  1. 定义myAxios函数，接收配置对象，返回Promise对象
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        //*  2. 发起XHR请求，默认请求方法为GET
        const xhr = new XMLHttpRequest()
        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))
          }
        })
        xhr.send()
      })
    }
    //*  3. 调用成功/失败的处理程序
    myAxios({
      url: 'https://hmajax.itheima.net/api/province1',
    }).then(
      //*  4. 使用myAxios函数，获取省份列表展示
      result => {
        console.log(result);
        document.body.innerHTML = result.list.join('<br>')
      }).catch(error => {

        document.body.innerHTML = error.message
      })

三：查找数据需求：

/**

     * 目标：封装_简易axios函数_获取地区列表

     *  1. 判断有params选项，携带查询参数（核心）

     *  2. 使用URLSearchParams转换，并携带到url上(核心)

     *  3. 使用myAxios函数，获取地区列表

    */

 function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        if (config.params) {



//核心
          // 2.使用URLSearchParams，将传参对象中的params查询对象进行转化，并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          console.log(paramsObj);
          const queryString = paramsObj.toString()
          //把查询字符串拼接在url?后面
          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))
          }
        })
        xhr.send()
      })
    }
    myAxios({
      url: "https://hmajax.itheima.net/api/area",
      params: {
        pname: "辽宁省",
        cname: '大连市'
      }
    }).then(result => {
      console.log(result);
      document.body.innerHTML = result.list.join('<br>')
    })

四：发送数据需求：

 /**

     * 目标：封装_简易axios函数_注册用户

     *  1. 判断有data选项，携带请求体

     *  2. 转换数据类型，在send中发送

     *  3. 使用myAxios函数，完成注册用户

    */

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))
          }
        })

//发送数据需求
        if (config.data) {
          xhr.setRequestHeader('Content-Type', 'application/json')
          //2.转换数据类型，将data中的对象转换为json字符串，在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.send(jsonStr)
        } else {
          xhr.send()
        }
      })
    }
//发送数据需求
    document.querySelector('.reg-btn').addEventListener('click', () => {
      myAxios({
        url: 'https://hmajax.itheima.net/api/register',
        method: 'post',
        data: {
          username: 'itheima9999',
          password: '123456'
        }
      }).then(result => {
        console.log(result);
      }).catch(error => {
        console.log(error);
      })
    })