Promise的基本使用
一，简介
-
Prpmise到底是什么？
- Promise是异步编程的一种解决方案(是ES6中一个非常重要且好用的特性)
- 可一优雅的方式解决回调地狱
-
什么情况下会用到Promise?
- 一般情况下是有异步操作，使用Promise对这个异步操作进行封装
二，基本语法
// 1.使用setTimeout
// setTimeout(function() {
// },1000)
// 异步操作
// setTimeout(() => {
// console.log('setTimeout');
// },1000)
// 解决 , 拒绝
// 参数->函数(resolve,reject)
// resolve,reject 它们本身又是函数
// 链式编程
new Promise((resolve,reject) => {
// 第一次网络请求的代码
setTimeout(() => {
resolve()
},1000)
}).then(() => {
// 第一次拿到结果的代码
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
return new Promise((resolve,reject) => {
// 第二次网络请求的代码
setTimeout(() => {
resolve()
},1000)
})
}).then(() => {
// 第二次处理的代码
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
return new Promise ((resolve,reject) => {
// 第三次网络请求的代码
setTimeout(() => {
resolve()
},1000)
})
}).then(() => {
// 第三次处理的代码
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
console.log('Hello World');
})
new Promise((resolve,reject) => {
setTimeout(() => {
//成功的时候调用resolve
// resolve('Hello World')
// 失败的时候调用reject
reject('error message')
},1000)
}).then((data) => {
// 1.100行的处理代码
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
}).catch((err) => {
// 调用reject的时候会把错误信息传到这里输出
console.log(err);
})
三,promise的三种状态和另外的处理方式
Promise的另外理形式（不用catch,then里面传入两个参数）
// 模拟的异步操作
new Promise((resolve,reject) => {
setTimeout(() => {
// 请求成功
resolve('Hello VueJs')
// 请求失败
reject('err message')
},1000)
}).then(data => {
console.log(data);
},err => {
console.log(err);
})
