Ajax-封装简易axios

Ajax
1.5k 词
封装简易axios

封装简易axios#

基于 Promise + XHR 封装 myAxios 函数

封装axios获取省份列表#

步骤：

  1. 定义myAxios函数，接收 配置对象 ，返回 Promise对象
  2. 发起 XHR 请求，默认请求方法为 GET
  3. 调用成功/失败的处理程序
  4. 使用myAxios函数，获取省份列表
// 1.1定义函数，接收配置对象，返回Promise对象
function myAxios(config) {
    return new Promise((resolve, reject) => {
        // 1.2发起XHR请求，默认请求方法GET
        const xhr = new XMLHttpRequest()
        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', function() {
            // 1.3调用成功/失败的处理程序
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.response))
            } else {
                reject(new Error(xhr.response))
            }
        })
        xhr.send()
    })
}
// 1.4使用myAxios函数获取数据
myAxios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(res => {
    document.querySelector('.provincebox').innerHTML = res.list.join('---')
    console.log(res);
}).catch(err => {
    document.querySelector('.provincebox').innerHTML = err.message
    console.log(err);
})

封装axios获取地区列表#

需求：修改myAxios函数支持传递查询参数，获取"四川省"，"成都市"对应地区列表数据，回显页面

（偷一下懒，后面的回显都不写样式了，简单点，说话的方式简单点~[doge]）

要求：

  1. myAxios函数调用后，传入 params 选项
  2. 基于 URLSearchParams 转换为查询参数字符串
  3. 使用自己封装的myAxios函数展示地区列表

步骤：

  1. 封装有params选项，携带查询参数
  2. 使用URLSearchParams转换，并携带到url
  3. 使用myAxios函数获取数据
function myAxios(config) {
    return new Promise((resolve, reject) => {
        // 1.2发起XHR请求，默认请求方法GET
        const xhr = new XMLHttpRequest();
        // 2.1判断是否有params选项，携带查询参数
        if (config.params) {
            // 2.2使用URLSearchParams
            const paramsObj = new URLSearchParams(config.params)
            const queryString = paramsObj.toString();
            // 查询参数字符串拼接到url
            config.url += `?${queryString}`
        }
        ...
    })
}
// 2.3使用myAxios获取地区列表
myAxios({
    url: 'http://hmajax.itheima.net/api/area',
    params: {
        pname: '四川省',
        cname: '成都市'
    }
}).then(res => {
    console.log(res);
    document.querySelector('.areabox').innerHTML = res.list.join('---')
}).catch(err => {
    document.querySelector('.areabox').innerHTML = err.message
})

封装axios注册用户#

需求：修改myAxios函数支持传递 请求体数据 ，完成注册用户功能

步骤：

  1. myAxios函数调用后，判断 data 选项
  2. 转换数据类型，在 send() 方法中发送请求体数据
  3. 使用自己封装的myAxios函数完成注册用户功能

用户注册

function myAxios(config) {
    return new Promise((resolve, reject) => {
        ...
        xhr.addEventListener('loadend', function() {
        ...
        });
        // 3.1判断是否有data选项，携带请求体
        if (config.data) {
            // 3.2接口要求传参为JSON字符串，转换类型
            const dataStr = JSON.stringify(config.data)
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.send(dataStr)
        } else {
            // 若没有请求体数据，则正常发送
            xhr.send()
        }
    })
}
// 3.3使用myAxios注册用户
document.querySelector('.regsubmit').addEventListener('click', function() {
    // 获取表单值
    const username = document.querySelector('#username').value;
    const password = document.querySelector('#password').value;
    myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
            username,
            password
        }
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
})

完整myAxios()#

// 1.1定义函数，接收配置对象，返回Promise对象
function myAxios(config) {
    return new Promise((resolve, reject) => {
        // 1.2发起XHR请求，默认请求方法GET
        const xhr = new XMLHttpRequest();
        // 2.1判断是否有params选项，携带查询参数
        if (config.params) {
            // 2.2使用URLSearchParams
            const paramsObj = new URLSearchParams(config.params)
            const queryString = paramsObj.toString();
            // 查询参数字符串拼接到url
            config.url += `?${queryString}`
        }
        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', function() {
            // 1.3调用成功/失败的处理程序
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(JSON.parse(xhr.response))
            } else {
                reject(new Error(xhr.response))
            }
        });
        // 3.1判断是否有data选项，携带请求体
        if (config.data) {
            // 3.2接口要求传参为JSON字符串，转换类型
            const dataStr = JSON.stringify(config.data)
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.send(dataStr)
        } else {
            // 若没有请求体数据，则正常发送
            xhr.send()
        }
    })
}