手揣网教程/网站教程/内容

promise如何封装ajax?promise封装ajax的完成办法

网站教程2024-12-05 阅读
[摘要]本篇文章给大家带来的内容是关于promise如何封装ajax?promise封装ajax的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。首先贴代码var ajaxOptio...
本篇文章给大家带来的内容是关于promise如何封装ajax?promise封装ajax的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

首先贴代码

var ajaxOptions = {
    url: 'url',
    method: 'GET',
    async: true,
    data: null,
    dataType: 'text',
}

function ajax(protoOptions) {
    var options = {};

    for(var i in ajaxOptions){
        options[i] = protoOptions[i]      ajaxOptions[i];
    }
    

    return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();

        xhr.open(options.method, options.url, options.async);

        xhr.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                resolve(this.responseText, this);
            } else {
                var resJson = {
                    code: this.status,
                    response: this.response
                }
                reject(resJson, this)
            }
        }

        xhr.send()

    })
}

注释:

1,open(method, url, async)

  method: GET和POST;

  url: 发送到服务端的url;

  async: 异步true,同步false;

2,onreadystatechange

  每当readyState的值变化,onreadystatechange函数自动执行

3,readyState 服务器响应的状态信息

  当readyState的值为4,status状态为200时表示相应已就绪,可以执行成功调用的方法,反之调用失败调用的方法

以上就是promise如何封装ajax?promise封装ajax的实现方法的详细内容,更多请关注php中文网其它相关文章!

  • 微信
  • 分享

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

    ……

    标签:promise如何封装ajax?promise封装ajax的完成办法
    相关阅读