编程宝库 - 技术改变世界

编程宝库

Search

编程技术

前端怎么防止用户修改水印

进程、线程和协程的区别

JavaScript异步编程Promise详解

什么是Promise

Promise 是异步编程的一种解决方案。ES6中已经提供了原生Promise对象。一个Promise对象会处于以下几种状态（fulfilled，rejected两种状态一旦确定后不会改变）：

待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。

基本用法

Promise对象是一个构造函数，用来创建Promise实例，它接收两个参数resolve和reject。

resolve的作用是将Promise对象的状态从pending变为fulfilled，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
reject的作用是将Promise对象的状态从pending变为rejected，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

const promise = new Promise(function(resolve, reject) {
  // ... 
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后，使用then方法分别指定fulfilled状态和rejected状态的回调函数。

then接收两个参数，第一个是Promise对象的状态变为fulfilled时的回调函数，第二个是状态变为rejected时的回调函数。
catch接收Promise对象的状态变为rejected时的回调函数。

promise.then(function (value){
    // ....
},function (err){
    // .... err
})
  
promise.then(function (value){
    // ....
}).catch(function (err){
    // ....
})

Promise的方法

Promise.prototype.then()

then方法是定义在原型对象Promise.prototype上，前面说过，它接收两个可选参数，第一个参数是fulfilled状态的回调函数，第二个参数是rejected状态的回调函数。

then方法返回的是一个新的Promise实例，方便我们采用链式写法。比如then后面接着写then，当第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。这种链式方式可以很方便的指定一组按照次序调用的回调函数。

loadData().then(function (value){
    return 3
}).then(function (num){
    console.log("ok", num) // 3
})

Promise.prototype.catch()

catch方法是用于指定发生错误时的回调函数。如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。

const promise = new Promise(function(resolve, reject) {
  throw new Error('unkonw error'); // 抛出错误状态变为 -> reject
});
const promise = new Promise(function(resolve, reject) {
  reject('unkonw error') // 使用reject()方法将状态变为 -> reject
});
promise.catch(function(error) {
  console.log(error);
});

Promise对象的错误会一直向后传递，直到被捕获为止。比如下面代码：catch会捕获loadData和两个then里面抛出的错误。

loadData().then(function(value) {
  return loadData(value);
}).then(function(users) {
 
}).catch(function(err) {
  // 处理前面三个Promise产生的错误
});

如果我们不设置catch()，当遇到错误时Promise不会将错误抛出外面，也就是不会影响外部代码执行。

const promise = new Promise(function(resolve, reject) {
      resolve(a) // ReferenceError: a is not defined
});
promise.then(function(value) {
  console.log('value is ', value)
});
setTimeout(() => { console.log('code is run') }, 1000); // code is run

Promise.prototype.finally()

finally()方法不管 Promise 对象最后状态如何，都会执行的操作。下面是我们使用 Promise 的一个常规结构。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Promise.all()

Promise.all()方法可以将多个 Promise 实例包装成一个新的 Promise 实例返回。

const promise = Promise.all([p1, p2, p3]);

新promise状态来依赖于“传入的promise”。

只有当所有“传入的promise”状态都变成fulfilled，它的状态才会变成fulfilled，此时“传入的promise”返回值组成一个数组，传递给promise的回调函数。
如果“传入的promise”之中有一个被rejected，新promise的状态就会变成rejected，此时第一个被reject的promise的返回值，会传递给promise的回调函数。

const promises = [1,2,3,4].map(function (id) {
  return loadData(id);
});

Promise.all(promises).then(function (users) {
  // ...
}).catch(function(err){
  // ...
});

Promise.race()

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

Promise.race()方法的参数与Promise.all()方法一样。

const promise = Promise.race([p1, p2, p3]);

Promise.all() 和 Promise.race()对比：

Promise.all() ，如果所有都执行成功则返回所有成功的promise值，如果有失败则返回第一个失败的值。
Promise.race()，返回第一个执行完成的promise 值，它可能是fulfilled和rejected状态。

这两个方法的使用场景。

场景一，用户登录社交网站主页后，会同时异步请求拉取用户信息，关注列表，粉丝列表，我们需要保证所有数据请求成功再进行渲染页面，只要有一个数据不成功就会重定向页面，这里可以使用Promise.all。

function initUserHome() {
  Promise.all([
  new Promise(getMe),
  new Promise(getFollows),
  new Promise(getFans)
])  
    .then(function(data){
        // 显示页面
  })
    .catch(function(err){
    // .... 重定向页面
  });
};

initUserHome();

场景二，假如我们在做一个抢票软件，虽然请求了很多卖票渠道，每次只需返回第一个执行完成的Promise，这里可以使用Promise.race。

function getTicket() {
  Promise.race([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 抢票成功
  })
    .catch(function(err){
    // .... 抢票失败，重试
  });
};

getTicket();

Promise.allSettled()

使用Promise.all()时，如果有一个Promise 失败后，其它Promise 不会停止执行。

const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

try {
  await Promise.all(requests);
  console.log('所有请求都成功。');
} catch {
  console.log('有一个请求失败，其他请求可能还没结束。');
}

有的时候，我们希望等到一组异步操作都结束了，再进行下一步操作。这时就需要使用Promise.allSettled()，的它参数是一个数组，数组的每个成员都是一个 Promise 对象，返回一个新的 Promise 对象。它只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。

const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

await Promise.allSettled(requests);
console.log('所有请求完成后（包括成功失败）执行');

Promise.any()

只要传入的Promise有一个变成fulfilled状态，新的Promise就会变成fulfilled状态；如果所有传入的Promise都变成rejected状态，新的Promise就会变成rejected状态。

Promise.any()和Promise.race()差不多，区别在于Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected 状态才会结束。

回到Promise.race()多渠道抢票的场景，如果我们需要保证要么有一个渠道抢票成功，要么全部渠道都失败，使用Promise.any()就显得更合适。

function getTicket() {
  Promise.any([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 有一个抢票成功
  })
    .catch(function(err){
    // .... 所有渠道都失败了
  });
};

getTicket();

Promise.resolve()

Promise.resolve()方法将现有对象转换为Promise对象。等价于下面代码：

new Promise(resolve => resolve(1))

传入的参数不同，处理

参数Promise 实例，它将不做任何修改、原封不动地返回这个实例。
参数thenable对象，它会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。
```
let thenable = {
  then: function(resolve, reject) {
    resolve(1);
  }
};
```

参数是普通值，返回一个新的 Promise 对象，状态为resolved。

const promise = Promise.resolve(1);

promise.then(function (value) {
  console.log(value) // 1
});

无参数，直接返回一个resolved状态的 Promise 对象。

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

const promise = Promise.reject('unkonw error');
// 相当于
const promise = new Promise((resolve, reject) => reject('unkonw error'))

promise.then(null, function (s) {
  console.log(s)
});
// unkonw error

简单场景

异步加载图片：

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
      const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = url;
  });
}

请求超时处理：

//请求
function request(){
    return new Promise(function(resolve, reject){
          // code ....
         resolve('request ok')
    })
}

function timeoutHandle(time){
         return new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('timeout');
        }, time);
    });
}

Promise.race([
    request(),
    timeoutHandle(5000)
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)// timeout
})JavaScript异步编程Promise详解
什么是Promise
Promise 是异步编程的一种解决方案。ES6中已经提供了原生Promise对象。一个Promise对象会处于以下几种状态（fulfilled，rejected两种状态一旦确定后不会改变）：
待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
已兑现（fulfilled）: 意味着操作成功完成。
已拒绝（rejected）: 意味着操作失败。
基本用法
Promise对象是一个构造函数，用来创建Promise实例，它接收两个参数resolve和reject。
resolve的作用是将Promise对象的状态从pending变为fulfilled，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
reject的作用是将Promise对象的状态从pending变为rejected，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
const promise = new Promise(function(resolve, reject) {
  // ... 
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
Promise实例生成以后，使用then方法分别指定fulfilled状态和rejected状态的回调函数。
then接收两个参数，第一个是Promise对象的状态变为fulfilled时的回调函数，第二个是状态变为rejected时的回调函数。
catch接收Promise对象的状态变为rejected时的回调函数。
promise.then(function (value){
    // ....
},function (err){
    // .... err
})
  
promise.then(function (value){
    // ....
}).catch(function (err){
    // ....
})
Promise的方法
Promise.prototype.then()
then方法是定义在原型对象Promise.prototype上，前面说过，它接收两个可选参数，第一个参数是fulfilled状态的回调函数，第二个参数是rejected状态的回调函数。
then方法返回的是一个新的Promise实例，方便我们采用链式写法。比如then后面接着写then，当第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。这种链式方式可以很方便的指定一组按照次序调用的回调函数。
loadData().then(function (value){
    return 3
}).then(function (num){
    console.log("ok", num) // 3
})
Promise.prototype.catch()
catch方法是用于指定发生错误时的回调函数。如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。
const promise = new Promise(function(resolve, reject) {
  throw new Error('unkonw error'); // 抛出错误状态变为 -> reject
});
const promise = new Promise(function(resolve, reject) {
  reject('unkonw error') // 使用reject()方法将状态变为 -> reject
});
promise.catch(function(error) {
  console.log(error);
});
Promise对象的错误会一直向后传递，直到被捕获为止。比如下面代码：catch会捕获loadData和两个then里面抛出的错误。
loadData().then(function(value) {
  return loadData(value);
}).then(function(users) {
 
}).catch(function(err) {
  // 处理前面三个Promise产生的错误
});
如果我们不设置catch()，当遇到错误时Promise不会将错误抛出外面，也就是不会影响外部代码执行。
const promise = new Promise(function(resolve, reject) {
      resolve(a) // ReferenceError: a is not defined
});
promise.then(function(value) {
  console.log('value is ', value)
});
setTimeout(() => { console.log('code is run') }, 1000); // code is run
Promise.prototype.finally()
finally()方法不管 Promise 对象最后状态如何，都会执行的操作。下面是我们使用 Promise 的一个常规结构。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
Promise.all()
Promise.all()方法可以将多个 Promise 实例包装成一个新的 Promise 实例返回。
const promise = Promise.all([p1, p2, p3]);
新promise状态来依赖于“传入的promise”。
只有当所有“传入的promise”状态都变成fulfilled，它的状态才会变成fulfilled，此时“传入的promise”返回值组成一个数组，传递给promise的回调函数。
如果“传入的promise”之中有一个被rejected，新promise的状态就会变成rejected，此时第一个被reject的promise的返回值，会传递给promise的回调函数。
const promises = [1,2,3,4].map(function (id) {
  return loadData(id);
});

Promise.all(promises).then(function (users) {
  // ...
}).catch(function(err){
  // ...
});
Promise.race()
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
Promise.race()方法的参数与Promise.all()方法一样。
const promise = Promise.race([p1, p2, p3]);
Promise.all() 和 Promise.race()对比：
Promise.all() ，如果所有都执行成功则返回所有成功的promise值，如果有失败则返回第一个失败的值。
Promise.race()，返回第一个执行完成的promise 值，它可能是fulfilled和rejected状态。
这两个方法的使用场景。
场景一，用户登录社交网站主页后，会同时异步请求拉取用户信息，关注列表，粉丝列表，我们需要保证所有数据请求成功再进行渲染页面，只要有一个数据不成功就会重定向页面，这里可以使用Promise.all。
function initUserHome() {
  Promise.all([
  new Promise(getMe),
  new Promise(getFollows),
  new Promise(getFans)
])  
    .then(function(data){
        // 显示页面
  })
    .catch(function(err){
    // .... 重定向页面
  });
};

initUserHome();
场景二，假如我们在做一个抢票软件，虽然请求了很多卖票渠道，每次只需返回第一个执行完成的Promise，这里可以使用Promise.race。
function getTicket() {
  Promise.race([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 抢票成功
  })
    .catch(function(err){
    // .... 抢票失败，重试
  });
};

getTicket();
Promise.allSettled()
使用Promise.all()时，如果有一个Promise 失败后，其它Promise 不会停止执行。
const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

try {
  await Promise.all(requests);
  console.log('所有请求都成功。');
} catch {
  console.log('有一个请求失败，其他请求可能还没结束。');
}
有的时候，我们希望等到一组异步操作都结束了，再进行下一步操作。这时就需要使用Promise.allSettled()，的它参数是一个数组，数组的每个成员都是一个 Promise 对象，返回一个新的 Promise 对象。它只有等到参数数组的所有 Promise 对象都发生状态变更（不管是fulfilled还是rejected），返回的 Promise 对象才会发生状态变更。
const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

await Promise.allSettled(requests);
console.log('所有请求完成后（包括成功失败）执行');
Promise.any()
只要传入的Promise有一个变成fulfilled状态，新的Promise就会变成fulfilled状态；如果所有传入的Promise都变成rejected状态，新的Promise就会变成rejected状态。
Promise.any()和Promise.race()差不多，区别在于Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected 状态才会结束。
回到Promise.race()多渠道抢票的场景，如果我们需要保证要么有一个渠道抢票成功，要么全部渠道都失败，使用Promise.any()就显得更合适。
function getTicket() {
  Promise.any([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 有一个抢票成功
  })
    .catch(function(err){
    // .... 所有渠道都失败了
  });
};

getTicket();
Promise.resolve()
Promise.resolve()方法将现有对象转换为Promise对象。等价于下面代码：
new Promise(resolve => resolve(1))
传入的参数不同，处理
参数Promise 实例，它将不做任何修改、原封不动地返回这个实例。
参数thenable对象，它会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。
let thenable = {
  then: function(resolve, reject) {
    resolve(1);
  }
};
参数是普通值，返回一个新的 Promise 对象，状态为resolved。
const promise = Promise.resolve(1);

promise.then(function (value) {
  console.log(value) // 1
});
无参数，直接返回一个resolved状态的 Promise 对象。
Promise.reject()
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。
const promise = Promise.reject('unkonw error');
// 相当于
const promise = new Promise((resolve, reject) => reject('unkonw error'))

promise.then(null, function (s) {
  console.log(s)
});
// unkonw error
简单场景
异步加载图片：
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
      const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = url;
  });
}
请求超时处理：
//请求
function request(){
    return new Promise(function(resolve, reject){
          // code ....
         resolve('request ok')
    })
}

function timeoutHandle(time){
         return new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('timeout');
        }, time);
    });
}

Promise.race([
    request(),
    timeoutHandle(5000)
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)// timeout
})

                        
                        下一节：进程、线程和协程的区别编程技术 和 程序设计
在面试中经常会有面试官问题 “进程、线程和协程的区别”，这个问题操作系统中最基本的知识。进程、线程和协程都能够解决系统中并发的问题，但三者的实现方式、运行效率和使用开销却有着巨大的差别。1. 进程 1.1 定义：进程是计算机中程序的一次运行活动，是操作系统进行资源分配和调度的基本单位。每一个进程都拥有自己的地址空间，一般包括代码段、数据段、堆和栈。

前端怎么防止用户修改水印

进程、线程和协程的区别

编程宝库 - 技术改变世界

JavaScript异步编程Promise详解

什么是Promise

基本用法

Promise的方法

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

Promise.all()

Promise.race()

Promise.allSettled()

Promise.any()

Promise.resolve()

Promise.reject()

简单场景

JavaScript异步编程Promise详解

什么是Promise

基本用法

Promise的方法

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

Promise.all()

Promise.race()

Promise.allSettled()

Promise.any()

Promise.resolve()

Promise.reject()

简单场景

下一节：进程、线程和协程的区别

编程技术 和 程序设计

编程技术和程序设计