12.使用Promise封装Ajax

步骤都差不多,只是新创建了一个Promise对象,成功时调用resolve函数,失败时调用reject函数,然后再将这个promise返回出去

function ajax(options) {
    let promise = new Promise(function (resolve, reject) {
        //创建xhr对象
        const xhr = new XMLHttpRequest();

        //初始化参数的内容
        options = options || {};
        options.type = (options.type || 'GET').toUpperCase();
        options.dataType = options.dataType || 'json';

        //处理参数
        let str = '';
        let params = options.data;
        for (let key in params) {
            str += key + '=' + params[key] + '&'
        }
        //去除最后一个&
        params = str.slice(0, str.length - 1);

        //发起请求
        if (options.type === 'GET') {
            xhr.open('GET', options.url + '?' + params, true);
            xhr.send(null)
        } else if (options.type === 'POST') {
            xhr.open('POST', options.url, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(params);
        }

        //接收请求
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let status = xhr.status
                if (status >= 200 && status < 300) {
                    resolve(xhr.responseText)
                } else {
                    reject(new Error(status))
                }
            }
        }
    })
    return promise
}

相关推荐

  1. 12.使用Promise封装Ajax

    2024-02-09 06:22:02       35 阅读
  2. Promise封装ajax

    2024-02-09 06:22:02       14 阅读
  3. 封装promise请求方式

    2024-02-09 06:22:02       19 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-09 06:22:02       14 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-09 06:22:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-09 06:22:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-09 06:22:02       18 阅读

热门阅读

  1. 元素显示模式

    2024-02-09 06:22:02       28 阅读
  2. Kubernetes 是什么?

    2024-02-09 06:22:02       26 阅读
  3. 【Network Management】AUTOSAR架构下CanNm User Data详解

    2024-02-09 06:22:02       32 阅读
  4. 力扣738单调递增的数字思路以及贪心总结

    2024-02-09 06:22:02       36 阅读
  5. 【正则表达式的妙用】

    2024-02-09 06:22:02       31 阅读
  6. Nginx+React在Docker中实现项目部署

    2024-02-09 06:22:02       34 阅读
  7. 常用的文件系统、存储类型小整理

    2024-02-09 06:22:02       30 阅读