promise解决回调问题

Promise简介

Promise是ES6中新增的一个特性,是一种异步编程的解决方案,通过Promise可以写出更优雅的代码。比如我要做这样的一些逻辑操作(该示例主要是为了凸显问题):

  1. 从服务器中获取一个数据data1,
  2. 获取data1之后再从服务器获取data2,
  3. 获取data2之后在从服务器获取data3

上面操作在使用ajax的时候会写出下面的代码(伪代码):

$.ajax({
    success:function (data1) {        
        $.ajax({
            success:function (data2) {        
				$.ajax({
                    success:function (dat3) {        

                    }
                })
            }
        })
    }
})

上面代码被称为回调地狱,不利于维护,Promise的出现就是为了解决该问题的。

Promise的使用

当我们需要进行异步操作的时候可以使用Promise。Promise是一个类,可以通过new的方式来创建对象,里面需要传入一个函数类型的参数。该函数中需要传入2个参数resolve和reject,而这两个参数也是函数。下面示例是在第一个Promise中的函数里面发送请求,后面的then相当于是回调函数。

    new Promise((resolve, reject) => {
        //向后台发送请求
        setTimeout(function () {
            console.log(123)
            //reject('error')
            //调用resolve之后会进入到下面的then中
            resolve('hello')

        },2000)
    }).then((data) => {
        return new Promise((resolve,reject)=>{
            //向后台发送请求
            setTimeout(function () {
                console.log('456')
                //调用resolve之后会进入到下面的then中
                resolve(data + ' world')
            },2000)
        })
    }).then(data => {
        console.log(data)
    }).catch(function (msg) {
        console.log(msg)
    })
Category: vue