制作你的第一个 Atom 文本编辑器插件

用 Promises 来将下载好的 HTML 插入到编辑器中

理想情况下，我们希望 download 函数可以将 HTML 作为一个字符串来返回，而不仅仅是将页面的内容打印到控制台。然而，返回文本内容是无法实现的，因为我们要在回调函数里面访问内容而不是在 download 函数那里。

我们会通过返回一个 Promise 来解决这个问题，而不再是返回一个值。让我们改动 download 函数来返回一个 Promise：

1. download(url) {
2. return new Promise((resolve, reject) => {
3. request(url, (error, response, body) => {
4. if (!error && response.statusCode == 200) {
5. resolve(body)
6. } else {
7. reject({
8. reason: 'Unable to download page'
9. })
10. }
11. })
12. })
13. }

Promises 允许我们通过将异步逻辑封装在一个提供两个回调方法的函数里来返回获得的值（resolve 用来处理请求成功的返回值，reject 用来向使用者报错）。如果请求返回了错误我们就调用 reject，否则就用 resolve 来处理 HTML。

让我们更改 fetch 函数来使用 download 返回的 Promise：

1. fetch() {
2. let editor
3. if (editor = atom.workspace.getActiveTextEditor()) {
4. let selection = editor.getSelectedText()
5. this.download(selection).then((html) => {
6. editor.insertText(html)
7. }).catch((error) => {
8. atom.notifications.addWarning(error.reason)
9. })
10. }
11. },

在我们新版的 fetch 函数里，我们通过在 download 返回的 Promise 调用 then 方法来对 HTML 进行操作。这会将 HTML 插入到编辑器中。我们同样会通过调用 catch 方法来接收并处理所有的错误。我们通过用 Atom Notification API 来显示警告的形式来处理错误。

看看发生了什么变化。重新加载 Atom 并在一个选中的 URL 上执行软件包命令：

如果这个 URL 是无效的，一个警告通知将会弹出来：

在 sourcefetch 教程仓库 查看这一步所有的代码更改。

编写一个爬虫来提取 StackOverflow 页面的代码片段

下一步涉及用我们前面扒到的 StackOverflow 的页面的 HTML 来提取代码片段。我们尤其关注那些来自采纳答案（提问者选择的一个正确答案）的代码。我们可以在假设这类答案都是相关且正确的前提下大大简化我们这个软件包的实现。

使用 jQuery 和 Chrome 开发者工具来构建查询

这一部分假设你使用的是 Chrome 浏览器。你接下来可以使用其它浏览器，但是提示可能会不一样。

让我们先看看一张典型的包含采纳答案和代码片段的 StackOverflow 页面。我们将会使用 Chrome 开发者工具来浏览 HTML：

• 打开 Chrome 并跳到任意一个带有采纳答案和代码的 StackOverflow 页面，比如像这个用 Python 写的 hello world 的例子或者这个关于 用 C 来读取文本内容的问题。
• 滚动窗口到采纳答案的位置并选中一部分代码。
• 右击选中文本并选择 检查。
• 使用元素侦察器来检查代码片段在 HTML 中的位置。

注意文本结构应该是这样的：

1. <> class='accepted-answer'>
2. ...
3. ...
6. ...snippet elements...
9. ...
10. ...

• 采纳的答案通过一个 class 为 accepted-answer 的 div 来表示
• 代码块位于 pre 元素的内部
• 呈现代码片段的元素就是里面那一对 code 标签

现在让我们写一些 jQuery 代码来提取代码片段：

• 在开发者工具那里点击 Console 选项卡来访问 Javascript 控制台。
• 在控制台中输入 $('div.accepted-answer pre code').text() 并按下回车键。

你应该会看到控制台中打印出采纳答案的代码片段。我们刚刚运行的代码使用了一个 jQuery 提供的特别的 $ 函数。$ 接收要选择的查询字符串并返回网站中的某些 HTML 元素。让我们通过思考几个查询案例看看这段代码的工作原理：

1. $('div.accepted-answer')
2. > [div id='answer-1077349' class='answer accepted-answer' ... >div>]

上面的查询会匹配所有 class 为 accepted-answer 的

元素，在我们的案例中只有一个 div。

1. $('div.accepted-answer pre code')
2. > [code>...code>]

在前面的基础上改造了一下，这个查询会匹配所有在之前匹配的

内部的

元素内部的 元素。

1. $('div.accepted-answer pre code').text()
2. > 'print('Hello World!')'

text 函数提取并连接原本将由上一个查询返回的元素列表中的所有文本。这也从代码中去除了用来使语法高亮的元素。