现代 JavaScript 参考(6)

我们首先要创建一个 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 对象需要一个带有两个参数 ( resolvereject ) 的执行函数。这两个参数会把 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" ,显然这两个字符串长度是不同的。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywxjf.html