promise中调用ajax

最新推荐文章于 2025-07-01 21:11:04 发布

原创最新推荐文章于 2025-07-01 21:11:04 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#promise #ajax

JavaScript+前端开发专栏收录该内容

54 篇文章

订阅专栏

Promise是异步里面的一种解决方案，解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法，提供了`promise`对象， promise对象有三种状态:pending(进行中) 、Resolved(已经完成)和Rejected(已失败)

ES6规定，Promise对象是一个构造函数，用来生成Promise实例。

var promise=new Promise(function(resove,reject){
     if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
})

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

案例

var promise=new Promise(function(resolve,reject){
         console.log('promise');
     })
     promise.then(function(){
        console.log('我后执行')
     })
     console.log('我先执行')<br><br>//上面代码中，Promise新建后立即执行，所以首先输出的是“Promise”。然后，<code>then</code>方法指定的回调函数，<br>//将在当前脚本所有同步任务执行完才会执行，所以“我后执行”
 最后输出。

ajax

varhttp = {    get: function(url) {
        var promise = new Promise(function(resolve,
 reject) {
            $.ajax({
                url: url,
                method: 'get',
                success: function(data) {
                    resolve(data);
                },
                error: function(xhr, statusText) {
                    reject(statusText);
                }
            });
        });
        return promise;
    }
};
http.get('solve.php').then(function(data)
 {
    return data;
}, function(err) {
    return Promise.reject('Sorry, file not Found.');
}).then(function(data) {
    document.write(data);
}, function(err) {
    document.write(err);
});

Promise三种状态

pending、resolved、rejected

使用语法

var promis = new Promise(function(resolve,reject){
  $.ajax({
    url:'/api/something.json',
    method:'get',
    datatype:'json',
    success:(res) =>{
      resolve(res)
    },
    error:(err)=>{
      reject(err)
    }
  })
})

promis.then(function(res){
  console.log(res)
}).catch(function(err){
  console.log(err)
});

Promise.prototype.then()

链式调用,状态变为resolve
如果把下一步想要的东西return出去,即可让下一个then使用

var promise = new Promise(function(resolve,reject){
  $.ajax({
    url:'/api/poisearch.json',
    method:'get',
    datatype:'json',
    success:(res) =>{
      resolve(res)
    },
    error:(err)=>{
      reject(err)
    }
  })
})

promise.then(function(res){
  return res.data
}).then(function(data){
  return data.result;
}).then(function(result){
  console.log(result)
});

上面的代码还可以借用箭头函数简写成,极大提升了代码的简洁性和可读性

promise.then(res => res.data)
  .then(data => data.result)
  .then(result => console.log(result));

Promise.prototype.catch()

如果异步操作抛出错误，状态就会变为Rejected，就会调用catch方法指定的回调函数，处理这个错误。

另外，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获。
如果Promise状态已经变成Resolved，再抛出错误是无效的。
catch方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。