【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请求，默认请求方法为GETconst 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);})})