1.回调地狱
使用ajax请求id ，再根据id请求用户名，再根据用户名请求email
定义：在回调函数中嵌套回调
通过promis解决回调地狱的问题
2.promise的使用
Promise语法：
const p = new Promise((resolve, reject) => {})
- Promise接收一个函数作为参数，在函数中有两个参数
- resolve是一个函数
- reject是一个函数
Promise有两个属性
- state 状态
- result 结果
1.Promise状态
第一种准备状态 pending(准备,待解决)
第二种状态 fulfilled(已成功)
第三种状态：rejected(已拒绝，失败)
2.Promise状态的改变
通过调用Promise里面的函数resolve()和reject()就可以改变Promise状态
Promise状态改变是一次性的，只能调用一个函数
const p = new Promise((resolve, reject) => {
//调用resolve函数 Promise状态变为fulfilled
//调用reject函数，Promise状态变为rejected
resolve();
rejected();
})
console.log(p);
3.Promise的结果
const p = new Promise((resolve, reject) => {
//调用resolve函数 通过给函数中传递参数 可以改变Promise的结果
resolve('成功')
})
console.log(p); //result 成功
3.Promise的方法
1.then方法
const p = new Promise((resolve, reject) => {
//调用resolve函数 通过给函数中传递参数 可以改变Promise的结果
resolve('成功')
// reject('失败')
})
console.log(p);
// then方法中有两个参数，一个是函数，另一个也是函数
p.then(()=>{
// 当Promise状态为fulfilled调用第一个函数
console.log('成功时候被调用');
},()=>{
//当Promise状态为rejected时调用第二个函数
console.log('reject时候被调用');
})
then方法中有两个参数，一个是函数，另一个也是函数
1.1获取Promise的数据
给then方法函数里面一个形参来使用Promise对象的结果
const p = new Promise((resolve, reject) => {
//调用resolve函数 通过给函数中传递参数 可以改变Promise的结果
resolve('123')
// reject('失败')
})
console.log(p);
// then方法中有两个参数，一个是函数，另一个也是函数
p.then((value)=>{
// 当Promise状态为fulfilled调用第一个函数
console.log('成功时候被调用',value);
},(reson)=>{
//当Promise状态为rejected时调用第二个函数
console.log('reject时候被调用',reson);
})
then方法会返回一个新的Promise实例，而且Promise的状态是pending
1.2链式操作
new Promise((resolve,reject)=>{}).then().then()
Promise里面状态不改变，不执行函数
const p = new Promise((reolve, reject) => {
reolve()
})
const t = p.then((value) => {
console.log('成功');
return '123'
// 如果这里代码出错就会改变Promise 状态为rejected
},(reson)=>{
console.log('失败');
})
t.then((value)=>{
console.log('成功1',value);
},(reson)=>{
console.log('失败1',reson);
})
使用return可以在then方法中将返回的Promise实例改为fulfilled
2.catch方法
catch里面参数函数在什么时候被执行？
- 在调用reject
- 输入了一个错误的代码的时候会调用catch
const p = new Promise((resolve, reject) => {
reject()
// console.log(a);
})
p.catch((reson) => {
console.log('出错了', reson);
})
4.解决回调地狱的问题
使用Promise
new Promise((reslove, reject) => {
$.ajax({
type: 'GET',
url: 'data1.json',
success: function (res) {
reslove(res)
},
error: function (res) {
}
})
}).then((data) => {
const { id } = data
return new Promise((reslove, reject) => {
$.ajax({
type: 'GET',
url: 'data2.json',
data: { id },
success: function (res) {
reslove(res)
},
error: function (res) {
}
})
}).then((data) => {
const { username } = data
return new Promise((reslove, reject) => {
$.ajax({
type: 'GET',
url: 'data3.json',
data: { username },
success: function (res) {
reslove(res)
},
error: function (res) {
}
})
})
})
})
代码优化
因为代码里面有许多重复的，所以我们把Ajax封装起来 看起来更简洁
// 封装一个函数用来请求数据
function getData (url, data = {}) {
return new Promise((reslove, reject) => {
$.ajax({
type: 'GET',
url: url,
data: data,
success: function (res) {
reslove(res)
},
})
})
}
getData('data1.json').then((data) => {
const { id } = data
return getData('data2.json', { id }).then((data) => {
const { username } = data
return getData('data3.json', { username }).then((data)=>{
console.log(data);
})
})
})
