ES6之Promise函数学习

为什么要有Promise函数

• Promise函数是为了解决回调地狱的问题

// 回调地域
// 像这种操蛋的情况---下一个请求依赖上一个请求的响应结果，必须在上一个请求响应成功后才能执行，像这样类似的情况就叫回调地狱----写起来很操蛋，就够很是混乱，看看用Promise会咋样。。
$.ajax({
   type: 'GET',
   url: 'api/url1',
   dataType: 'json',
   data: { id: 'id' },
   success: function (data) {
    console.log(data)
    $.ajax({
     type: 'GET',
     url: 'api/url2',
     dataType: 'json',
     data: { mobile: data.mobile },
     success: function (data) {
      console.log(data)
      $.ajax({
       type: 'GET',
       url: 'api/url3',
       dataType: 'json',
       data: { name: data.name },
       success: function (data) {
        console.log(data)
        .
        .
        .
        .
        .
        .
       },
       error: function (err) {
        console.log(err)
       }
      })
     },
     error: function (err) {
      console.log(err)
     }
    })
   },
   error: function (err) {
    console.log(err)
   }
  })

• Promise函数处理

let MyPromise1 = () => { return new Promise((resolve,reject) => {
	$.ajax({
       type: 'GET',
       url: 'api/url1',
       dataType: 'json',
       data: { id: id },
       success: function (data) {
        console.log(data)
        resolve(data);
       },
       error: function (err) {
        console.log(err)
        reject(err);
       }
      })
})
}
let MyPromise2 = (data) => {return new Promise((resolve,reject) => {
	$.ajax({
       type: 'GET',
       url: 'api/url2',
       dataType: 'json',
       data: { mobile: data.mobile},
       success: function (data) {
        console.log(data)
        resolve(data);
       },
       error: function (err) {
        console.log(err)
        reject(err);
       }
      })
})
}
let MyPromise3 = (data) => {return new Promise((resolve,reject) => {
	$.ajax({
       type: 'GET',
       url: 'api/url3',
       dataType: 'json',
       data: { name: data.name },
       success: function (data) {
        console.log(data)
        resolve(data);
       },
       error: function (err) {
        console.log(err)
        reject(err);
       }
      })
})
}

MyPromise1().then(res => {
	return MyPromise2(res)
}).then(res => {
	return MyPromise3(res)
}).catch(err => {
	console.log(err)
})
// 写成这个样子是不是感觉结构清晰多了呢

• 再来优化一波Promise函数处理的写法

let MyPromiseFn = (type,url,dataType,data) => { 
	return new Promise((resolve,reject) => {
	$.ajax({
       type: type,
       url: url,
       dataType: dataType,
       data: data,
       success: function (data) {
        console.log(data)
        resolve(data);
       },
       error: function (err) {
        console.log(err)
        reject(err);
       }
      })
})
}
MyPromiseFn('GET','api/url1','json',{id: 'id'}).then(res => {
	return MyPromiseFn('GET','api/url2','json',{mobile: res.mobile})
}).then(res => {
	return MyPromiseFn('GET','api/url3','json',{name: res.name})
}).catch(err => {
	console.log(err)
})
// 这样的话是不是更好些呢，可以一直这样链式的调用下去，哈哈哈

Promise.all()用法

• Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

let MyPromiseFn = (type,url,dataType,data) => { 
	return new Promise((resolve,reject) => {
	$.ajax({
       type: type,
       url: url,
       dataType: dataType,
       data: data,
       success: function (data) {
        console.log(data)
        resolve(data);
       },
       error: function (err) {
        console.log(err)
        reject(err);
       }
      })
})
Promise.all([MyPromiseFn('GET','api/url1','json',{id: 'id'}),MyPromiseFn('GET','api/url3','json',{name: 'name'}),MyPromiseFn('GET','api/url2','json',{mobile: 'mobile'})]).then( res => {
	// 这里返回的是一个数组，内容是按传入的数组函数的顺序调用成功的结果，（所有的都成功了，才会返回结果哦）
	console.log(res)
}).catch(err => {
	// 只要传入的数组函数有一个失败的就会进入这里，抛出失败的结果，终止Promise
	console.log(res)
});

Promise.race的用法

• 这玩意是，接收一个promise的数组，只比速度无论对错，谁快就返回谁

let MyPromise1 = new Promise((resolve, reject) => {
   let data = {
    name: 'MY'
   }
   setTimeout(() => {
    // resolve('200');
   reject('err1');
   },200)
  })
  let MyPromise2 = new Promise((resolve, reject) => {
   let data = {
    name: 'MHT'
   }
   setTimeout(() => {
    resolve('300');
   // reject('err2');
   },300)
  })
  let MyPromise3 = new Promise((resolve, reject) => {
   let data = {
    name: 'WJL'
   }
   setTimeout(() => {
    resolve('400');
   // reject('err3');
   },400)
  })

Promise.race([MyPromise1,MyPromise2,MyPromise3]).then(res => {
 console.log(res)
}).catch(err => {
 console.log(err)
})