我们首先要创建一个 promise。我们将会使用 jQuery 的 get 方法对 X 资源执行 Ajax 请求。
const xFetcherPromise = new Promise( // 使用 "new" 关键字创建promise,并把它保存至一个变量 function(resolve, reject) { // Promise 构造函数需要一个带有着 resolve 和 reject 这两个参数的函数作为参数 $.get("X") // 执行 Ajax 请求 .done(function(X) { // 一旦请求完成... resolve(X); // ... 把 X 值做为参数去 resolve promise }) .fail(function(error) { // 如果请求失败... reject(error); // ... 把 error 做为参数去 reject promise }); } )如上示例所示,Promise 对象需要一个带有两个参数 ( resolve 和 reject ) 的执行函数。这两个参数会把 pending 状态的 promise 分别进行 fulfilled 和 rejected 的处理。
Promise 在实例创建后处于待处理状态,并且它的执行器函数立即执行。一旦在执行函数中调用了 resolve 或 reject 函数,Promise 将调用相关的处理程序。
Promise 处理器的用法为了获得 promise 结果(或错误),我们必须通过执行以下操作来附加处理程序:
xFetcherPromise .then(function(X) { console.log(X); }) .catch(function(err) { console.log(err) })如果 promise 成功,则执行 resolve ,并执行 .then 参数所传递的函数。
如果失败,则执行 reject ,并执行 .catch 参数所传递的函数。
注意: 如果 promise 在相应的处理程序附加时已经 fulfilled 或 rejected,处理程序将被调用,
因此在异步操作完成和其处理程序被附加之间没有竞争条件。 (MDN)。
模板字符串是一种单行和多行字符串的 表达式插值 (expression interpolation)。
换句话说,它是一种新的字符串语法,你可以更方便地在 JavaScript 表达式中使用 (例如变量)。
简单的代码示例 const name = "Nick"; `Hello ${name}, the following expression is equal to four : ${2+2}`; // Hello Nick, the following expression is equal to four: 4 扩展阅读 带标签(tag)的模板字符串模板标签是可以作为的前缀函数。当一个函数被这钟方式调用时,第一个参数是出现在模板插值变量之间的字符串数组,并且随后的参数是插值变量的值。可以使用展开运算符 ... 捕获所有这些参数。 。
注意: 名为styled-components的著名库很大程度上依赖于此功能。
以下是他们工作的玩具示例。
function highlight(strings, ...values) { // 愚人码头注:为了更好的理解函数的参数,我增加了这样两行代码,特殊说明见示例代码下面的说明; console.log(strings);//(3) ["I like ", " on ", ".", raw: Array(3)] console.log(values);//(2) ["jam", "toast"] const interpolation = strings.reduce((prev, current) => { return prev + current + (values.length ? "<mark>" + values.shift() + "</mark>" : ""); }, ""); return interpolation; } const condiment = "jam"; const meal = "toast"; highlight`I like ${condiment} on ${meal}.`; // "I like <mark>jam</mark> on <mark>toast</mark>."——-愚人码头注开始——-
愚人码头注,关于第一个参数:标签函数的第一个参数是一个包含了字符串字面值的数组(在本例中分别为”I like “,” on “和”.”)。如果我们这样调用 highlight`I like ${condiment} on ${meal}` (注意最后面没”.”),那么第一个参数还是一个 3 个元素的数组:[“I like “, ” on “, “”],特别注意最后一个元素是的空字符串””;
字符串的 raw 属性strings 确实是一个数组,但是它还有一个 raw 属性。其属性值 strings.raw 也是一个数组,其元素分别表示 strings 中对应的,经过转义之前在 模板字符串(Template literals) 中由用户输入的字符串。我们来看一个例子:
const myTag = (strs, ...exprs) => { console.log(strs); //(3) ["x", "\y", "", raw: Array(3)] console.log(strs.raw); //(3) ["x", "\\y", "" console.log(exprs); //[1, 2] }; const obj = { a: 1, b: 2 }; const result = myTag`x${obj.a}\\y${obj.b}`;上例中 "\y" 未转义之前对应的字符串为 "\\y" ,显然这两个字符串长度是不同的。