Angular记录(1)

文档资料

• 箭头函数--MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

• 箭头函数--ES6文档：http://es6.ruanyifeng.com/#docs/function#箭头函数

• Promise 对象--JS教程：https://wangdoc.com/javascript/async/promise.html
• Promise--ES6文档：http://es6.ruanyifeng.com/#docs/promise
• Promise--MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

• Promise.prototype.then()--MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

• 教程：英雄指南：https://www.angular.cn/tutorial#tutorial-tour-of-heroes
• 工作区与项目文件的结构：https://www.angular.cn/guide/file-structure
• 组件简介：https://www.angular.cn/guide/architecture-components

• CLI 命令参考手册：https://www.angular.cn/cli

任务详情

箭头函数

箭头函数：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ES6文档链接：http://es6.ruanyifeng.com/#docs/function#箭头函数

感觉就是简化了函数的写法，函数实际执行并没有不同

注意点就是this指向定义时对象，用 rest 参数代替arguments对象

Promise 对象

Promise概念

Promise：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise.prototype.then()：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Promise 的含义

文档链接：http://es6.ruanyifeng.com/#docs/promise

Promise是比“回调和事件”更好的异步编程解决方案

Promise简介：所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

特点1：对象的状态不受外界影响。

特点2：一旦状态改变，就不会再变，任何时候都可以得到这个结果。。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

:缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

基本用法

所谓 Promise，就是ES6原生提供的一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

直接打印 console.dir(Promise) 来看看

这么一看就明白了，Promise是一个构造函数，自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法。

示例

使用then方法

let p1 = new Promise(function(resolve, reject) {
  resolve("Success!");
  // or
  // reject ("Error!");
});

p1.then(function(value) {
  console.log(value); // Success!
}, function(reason) {
  console.log(reason); // Error!
});

链式调用

then 方法返回一个Promise 对象，其允许方法链。

你可以传递一个 lambda 给 then 并且如果它返回一个 promise，一个等价的 Promise 将暴露给后续的方法链。下面的代码片段使用 setTimout 函数来模拟异步代码操作。

Promise.resolve("foo")
  // 1. 接收 "foo" 并与 "bar" 拼接，并将其结果做为下一个resolve返回。
  .then(function(string) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += 'bar';
        resolve(string);
      }, 1);
    });
  })
  // 2. 接收 "foobar", 放入一个异步函数中处理该字符串
  // 并将其打印到控制台中, 但是不将处理后的字符串返回到下一个。
  .then(function(string) {
    setTimeout(function() {
      string += 'baz';
      console.log(string);
    }, 1)
    return string;
  })
  // 3. 打印本节中代码将如何运行的帮助消息，
  // 字符串实际上是由上一个回调函数之前的那块异步代码处理的。
  .then(function(string) {
    console.log("Last Then:  oops... didn't bother to instantiate and return " +
                "a promise in the prior then so the sequence may be a bit " +
                "surprising");

    // 注意 `string` 这时不会存在 'baz'。
    // 因为这是发生在我们通过setTimeout模拟的异步函数中。
    console.log(string);
});

当一个值只是从一个 lambda 内部返回时，它将有效地返回 Promise.resolve（）。

var p2 = new Promise(function(resolve, reject) {
  resolve(1);
});

p2.then(function(value) {
  console.log(value); // 1
  return value + 1;
}).then(function(value) {
  console.log(value + "- This synchronous usage is virtually pointless"); // 2- This synchronous usage is virtually pointless
});

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