Promise
Promise是用来解决回调地狱问题。
setTimeout(function () {
console.log('1s后要做的事情')
setTimeout(function () {
console.log('2s后要做的事情')
setTimeout(function () {
console.log('3s后要做的事情')
}, 1000)
}, 1000)
}, 1000)
使用别人提供的promise的api:
只要别人说支持promise,那就知道可以使用.then方法了
// 参数:回调函数
const p = new Promise(function (resolve, reject) {
// 异步操作成功就调用 resolve
// 异步操作失败就调用 reject
setTimeout(() => {
// 参数:表示成功后,要传递的数据
resolve('success')
// 参数:表示错误信息
// reject('出错了1111')
}, 2000)
})
// 使用:
p.then(function (data) {
// data 表示成功的数据
console.log('异步操作成功了', data)
return 666
})
.then(function (data1) {
console.log(data1)
})
.catch(function (err) {
// err 表示错误信息
console.log(err)
})
另外一种使用方式
p.then(function success(data) {
console.log('异步操作成功了', data)
}, function error(err) {
console.log(err)
})
自己封装Promise的api:
function timeout(time){
return new Promise(function(resolve, reject){
setTimeout(function(){
// 只需要改变promise的状态即可
resovle(123);
}, time)
})
}
timeout(1000).then(function(){
})
.then方法可以传递两个参数,一个是成功的回调一个是失败的回调
.then方法可以连写,但是连写的时候一定要在上一个.then方法中返回一个新的promise对象
// .then连写的时候,需要在回调函数中返回一个新的Promise对象
timeout(1000)
.then(function () {
console.log("1s后执行的代码");
return timeout(1000);
}).then(function () {
console.log("2s后执行的代码了")
return timeout(1000);
}).then(function () {
console.log("3s后执行的代码了")
return timeout(1000);
})
Promise.all 在所有的promise都成功之后,可以进行某些操作
Promise.all([
axios.get('http://localhost:3000/user'),
axios.get('http://localhost:3000/student'),
axios.get('http://localhost:3000/teacher')
])
.then(res => {
console.log(res)
})
Promise.race 在第一个的promise成功之后,可以进行某些操作
Promise.race([
axios.get('http://localhost:3000/user'),
axios.get('http://localhost:3000/student'),
axios.get('http://localhost:3000/teacher')
]).then(res => {
console.log(res)
})
Promise.resolve() 方法用来直接获取到一个成功的Promise对象
Promise.reject()方法直接获取到一个失败的Promise对象
使用Promise的方式封装ajax请求:
function ajax(option) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open(option.type, option.url);
xhr.send(null);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
resolve(xhr.responseText);
} else {
reject()
}
}
}
})
}
axios: 这是一个用来发送ajax请求的库 这个库支持Promise
axios({
url: "http://www.liulongbin.top:3005/api/getlunbo"
}).then(function(res){
console.log(res.data);
}, function(err){
})
异步编程的终极方案:async/await——基于 Promise
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('666 888')
}, 2000)
})
}
// async 用来修饰一个函数
// async 在 function 关键字之前
async function foo() {
// await 关键字只能用在 async 函数中!!!
// await 关键字后面跟一个 Promise 对象
// await 会等待该Promise封装的异步操作执行完毕后,才会执行后面的代码
// res 就是 Promise 中 resolve 函数的参数
const res = await fn()
console.log('await 后的结果为:', res)
}
foo()
Promise的三种状态:
1 pending 等待
2 fulfilled(resolved) 成功
3 rejected 失败
状态只能是:
1 pending -> fulfilled
2 pending -> rejected
状态只要发生改变了,就不会再次改变