Promise和ajax配合使用

最新推荐文章于 2024-11-05 11:24:39 发布

原创最新推荐文章于 2024-11-05 11:24:39 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#promise

JavaScript 同时被 2 个专栏收录

23 篇文章

订阅专栏

ES6

3 篇文章

订阅专栏

本文介绍了两种创建Promise对象的方法，并通过实例展示了如何结合AJAX实现异步请求。首先讲解了Promise的基本用法，包括resolve和reject的使用；接着详细演示了如何使用Promise封装AJAX请求，实现了成功的响应处理及错误捕获。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、声明Promise对象的方式。创建Promise对象，根据业务需求判断执行成功或者失败，成功调用resolve(),失败调用reject（）

// 方法1
let promise = new Promise ( (resolve, reject) => {
    if ( success ) {
        resolve(res) 
    } else {
        reject(err) 
    }
} )

// 方法2
function promise () {
    return new Promise ( function (resolve, reject) {
        if ( success ) {
            resolve(res)
        } else {
            reject(err)
        }
    } )
}

 promise.then(result=> {
       console.log(result);
     }, error=> {
       console.log(error);
     }
 ).catch(err=>{
      console.log(err);
       })

.then方法是Promise原型链上的方法，包含两个参数方法，分别为resolved的回调和已失败rejected的回调

2、原生js写ajax promise对象

//使用箭头函数模式   promise+ajax
    const ajaxPromise = (param,callback) => {
        return new Promise((resolve, reject)=>{
            //耗时操作
            var xhr = new XMLHttpRequest();
            xhr.open(param.type || "get", param.url, true);
            xhr.send(param.data || null);
            xhr.onreadystatechange = () => {
                var DONE = 4; // readyState 4 代表已向服务器发送请求
                var OK = 200; // status 200 代表服务器返回成功
                if (xhr.readyState === DONE) {
                    if (xhr.status === OK) {
                        callback(xhr.responseText)
                        //成功
                        resolve(xhr.responseText+'success');
                    } else {
                        //失败
                        reject();
                    }
                }
            }
        })
    }

https://www.jianshu.com/p/c98eb98bd00c

https://segmentfault.com/a/1190000013322684