本小节将会介绍有关报头的一些处理方式，并尝试进行最原始的图片加载、缓存等功能处理。最后使用PINRemoteImage组件完成图片的加载、显示、缓存等功能。

重要说明: 这是一个系列教程，非本人原创，而是翻译国外的一个教程。本人也在学习Swift，看到这个教程对开发一个实际的APP非常有帮助，所以翻译共享给大家。原教程非常长，我会陆续翻译并发布，欢迎交流与分享。

自定义报头(Header)

在Alamofire的请求中加入自定义报头(Header)有三种方式：第一种是通过Alamofire的管理器配置(Manager)为整个会话添加自定义报头(Header)，第二种是通过报头参数为单独的某一个请求添加自定义报头，最后一种方式是通过URLRequestConvertible添加自定义报头。下面我们将逐个进行讲解。

会话报头

有些报头(Header)在每次进行API请求的时候都需要提交，如：API键值，或者Accept等。因此这些报头(Header)最好是在全局会话中进行设置，而不是每次请求的时候重复设置。对于这种情况，我们可以通过Alamofire的管理器(Manager)进行设置：

let manager = Alamofire.Manager.sharedInstance   
manager.session.configuration.HTTPAdditionalHeaders = 
  ["Accept": "application/json"]

这样设置后，后面我们在请求的是否就需要通过Alamofire的管理器来，而不是Alamofire类方法，API键值就不需要在每次请求的时候再进行设置了(译者注：这里应该是说的Accept，不过API Key也是一样)。请求时，使用：

let manager = Alamofire.Manager.sharedInstance 
manager.request(...)

替换原来的方式：

Alamofire.request(...)

Alamofire的管理器是可以被复用，因此我们在GitHubAPIManager中增加一个变量来保存它：

class GitHubAPIManager {
  static let sharedInstance = GitHubAPIManager() 
  var alamofireManager:Alamofire.Manager
    
  let clientID: String = "1234567890"
  let clientSecret: String = "abcdefghijkl"
  init () {
    let configuration = NSURLSessionConfiguration.defaultSessionConfiguration()    
    alamofireManager = Alamofire.Manager(configuration: configuration)
  }
  ...
}

在你的API管理器中增加Alamofire.Manager的实例。

一次性请求的报头(Header)

那如何为一个单独的请求设置报头(Header)呢？Alamofire(1.3版本之后)为我们提供了很方便的方法来达到这个目的。首先我们为自定义的报头创建一个字典(Dictionary):

let headers = ["Accept": "application/json"]

然后传递给我们要调用的manager.request(如果不想在请求中包含前面设置的全局报头则可以使用Alamofire.request):

let urlString = "https://api.github.com/gists" 
manager.request(.GET, urlString, headers: headers).responseJSON(...)

或：

let urlString = "https://api.github.com/gists" 
Alamofire.request(.GET, urlString, headers: headers).responseJSON(...)  

通过URLRequestConvertible设置报头

因为我们使用Alamofire路由器(Router)来构建我们的URL请求，因此我们可以在NSMutableURLRequest中直接添加报头(Header)。如：

let URL = NSURL(string: GistRouter.baseURLString)!
let URLRequest = NSMutableURLRequest(URL:
  URL.URLByAppendingPathComponent(result.path))

URLRequest.setValue("application/json", forHTTPHeaderField: "Accept") 

这样当URL进行请求的时候就会使用这些报头。我们后面会使用这种方式将OAuth的访问令牌添加到报头中。

报头小结

许多功能中都会使用到报头(Header)，如：缓存、cookies等。后面我们所要实现的三种验证方式都会使用到，在那里我们会更进一步详细说明使用它。

检查你的开发文档中关于报头要求的章节，如果需要把它们添加到API管理器中。先不要担心有关认证的报头，我们会在认证章节中来处理。

在实现认证功能之前，我们还是先继续完善表格视图中的基本功能。接下来，我们会实现拥有者头像加载及显示，视图的滚动加载，及下拉刷新等功能。

图像的异步加载及缓存

到目前为止，我们构建了一个Swift的App，能够通过GitHub的API获取gists。我们已经实现如下功能：

• 通过GitHub的gists API获取公共的gists列表
• 使用Alamofire的响应序列化器将JSON转换为Swift对象数组
• 解析web服务返回JSON数据中的一些字段
• 将列表在表格视图中显示

在本章我们将添加一个新的功能，就是：为表格视图的每一个行显示gists拥有者的头像。我们将使用异步的方式，通过解析到的图像URL地址来加载图像。此外，我们还需要处理表格视图中单元格的复用问题，把图片加入到缓存中，并在显示的时候从中获取，而不是在每次需要显示的时候都从服务器中重复下载。

如果你的API中也需要显示图片，那么请跟随本章节来完成它。如果没有，那么你可以先跳过本章，等后面需要时，即使不是在视图表格中显示，再返回来。

当本章完成后，App界面看起来如下：

如果你前面没有一直跟着本教程编写代码，你可以从GitHub上下载前一个章节的完整代码。

如果你不想敲代码，你可以从GitHub上下载本章的代码。

通过URL加载图片

在Gist类中的init(json:)方法中我们已经解析了gist拥有者头像的URL地址：

self.ownerAvatarURL = json["owner"]["avatar_url"].string

现在我们已经为从URL中获取图片准备好了，接下来让我们完成它。首先，在GitHubAPIManager中添加下面的函数：

class GitHubAPIManager 
{
  ...
   
  func imageFromURLString(imageURLString: String, completionHandler: 
    (UIImage?, NSError?) -> Void) {
    alamofireManager.request(.GET, imageURLString)
      .response { (request, response, data, error) in
        // use the generic response serializer that returns NSData 
        if data == nil {
          completionHandler(nil, nil)
          return
        }
        let image = UIImage(data: data! as NSData) 
        completionHandler(image, nil)
    }
  }
}

我们使用imageURLString发起一个GET请求。一旦我们得到响应(注意这里返回的类型是NSData，因为我们使用的.response方法)，先对数据进行检查，并尝试转换成图片。如果转换成功，那么将它传给完成处理程序。如果失败(或者我们的请求根本不是图片)，我们将退出，并返回一个错误给完成处理程序。

将图像设置给UITableViewCell

现在我们终于可以显示图片了。修改MasterViewController.cellForRowAtIndexPath:

override func tableView(tableView: UITableView,
  cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
      
  let gist = gists[indexPath.row] 
  cell.textLabel!.text = gist.description 
  cell.detailTextLabel!.text = gist.ownerLogin 
  if let urlString = gist.ownerAvatarURL {
    GitHubAPIManager.sharedInstance.imageFromURLString(urlString, completionHandler: { 
      (image, error) in
      if let error = error {
        print(error)
      }
      if let cellToUpdate = self.tableView?.cellForRowAtIndexPath(indexPath) { 
        cellToUpdate.imageView?.image = image // will work fine even if image is nil 
        // need to reload the view, which won't happen otherwise
        // since this is in an async call
        cellToUpdate.setNeedsLayout()
      }
    })
  } else { 
    cell.imageView?.image = nil
  }
    
  return cell 
}

我们通过if let urlString = gist.ownerAvatarURL检查图像的URL是否有值。如果有值那么调用前面写的方法请求图片数据。否则，我们将清空图片单元格:

GitHubAPIManager.sharedInstance.imageFromURLString(urlString, completionHandler: {
  ...
} else { 
  cell.imageView?.image = nil
}

在完成处理程序中，我们先检查是否有错误，如果有把它打印出来。这里，我们没有使用guard那是因为在这种情况下，我们得先清空原来存在的图片，而guard将强迫我们返回，从而无法清除原来已经存在的图片：

completionHandler: { (image, error) in 
  if let error = error {
    print(error)
  }
  if let cellToUpdate = self.tableView?.cellForRowAtIndexPath(indexPath) { 
    cellToUpdate.imageView?.image = image // will work fine even if image is nil 
    // need to reload the view, which won't happen otherwise
    // since this is in an async call
    cellToUpdate.setNeedsLayout()
  }
})

一旦我们得到图片就把它设置给单元格。这里会稍微有些复杂，因为imageFromURLString方法是异步的，而且UITableView又会复用单元格。因为在这里我们使用了dequeueReusableCellWithIdentifier，表格视图显示的时候会复用那些已经在不在显示区域的单元格。举个例子，假如我们有20个gists需要显示，但在一屏中仅能显示10个，这时候表格视图则大概只会创建12～14个。假如一个单于格已经滚出了屏幕，我们将无法给它设置图片，因为这时候有可能它已经被其它gist对象复用了，从而会造成数据错位的错误。

解决这个问题的方法就是使用索引路径，一旦我们得到图片，通过该索引路径获取表格视图的单元格：

if let cellToUpdate = self.tableview?.cellForRowAtIndexPath(indexPath)

这样我们就可以把图片设置给单元格了。因为图片的加载是异步进行的，假如相应的单元格还是显示的，那么我们就可以使用cellToUpdate.setNeedsLayout()告诉视图我们已经改变了部分东西，需要进行重新绘制。

需要注意的一点是，这里我们没有检查所要设置给单元格的图片是否是为空。如果因为某种原因图像为空，我们还得需要清除单元格中原来的图像，因此最好使用cellToUpdate.imageView?.image = result.value来设置。

保存并运行。你应该可以看到每个gist拥有者的头像，如果他们设置了自己头像的话：

如果你的API中也有图片，参考本小节来加载它们。

优化

我们为每一个单元格发起图片请求，但有时候当我们得到图片的时候已经不需要了，因为它已经滚出了屏幕的显示区域。一种优化方式就是当单元格滚出屏幕时取消Alamofire请求。但假如你的App中需要处理大量的图片，我估计你会不想这么干(因为你知道，这样会造成滚动不平滑)。现在我们的滚动看起来还是非常平滑的，并且我们还打算增加图片的缓存处理，因此刚才所说的那个问题已经不是现在急需处理的问题了。

即使对于这么简单的应用，图片缓存的优化还是非常值得的，这样就不用每次都去请求了。接下来我们将快速的，使用一个简单的，只能在单次运行中有效的缓存，来看看如何工作的。然后，我们将使用PINRemoeImage替换我们的缓存，PINRemoeImage是一个非常智能的具有持久化的缓存。

图片缓存

在MasterViewController中我们添加一个字典用来存放这些图像，并使用它们的URL作为key:

var imageCache: Dictionary<String, UIImage?> = Dictionary<String, UIImage?>()

这样我们就可以在获取图片后将它存放字典中(在cellForRowAtIndexPath函数中):

if let urlString = gist.ownerAvatarURL { 
  GitHubAPIManager.sharedInstance.imageFromURLString(urlString, completionHandler: {
    (image, error) in
    if let error = error {
      print(error)
    }
    // Save the image so we won't have to keep fetching it if they scroll
    self.imageCache[urlString] = image
    if let cellToUpdate = self.tableView?.cellForRowAtIndexPath(indexPath) {
      cellToUpdate.imageView?.image = image // will work fine even if image is nil 
      // need to reload the view, which won't happen otherwise
      // since this is in an async call
      cellToUpdate.setNeedsLayout()
    }
  })
} else { 
  cell.imageView?.image = nil
}

在获取图片前我们先检查所要加载的图片是否已经在缓存中:

if let urlString = gist.ownerAvatarURL {
  if let cachedImage = imageCache[urlString] {
    cell.imageView?.image = cachedImage // will work fine even if image is nil 
  } else {
    GitHubAPIManager.sharedInstance.imageFromURLString(urlString, completionHandler: {
      ...
    })
  }
} else { 
  cell.imageView?.image = nil
}

最终代码为：

override func tableView(tableView: UITableView, cellForRowAtIndexPath
  indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
    
  let gist = gists[indexPath.row]
  cell.textLabel!.text = gist.description 
  cell.detailTextLabel!.text = gist.ownerLogin
  // set cell.imageView to display image at gist.ownerAvatarURL 
  if let urlString = gist.ownerAvatarURL {
    if let cachedImage = imageCache[urlString] {
      cell.imageView?.image = cachedImage // will work fine even if image is nil
    } else {
      GitHubAPIManager.sharedInstance.imageFromURLString(urlString, completionHandler: {
        (image, error) in
        if let error = error {
          print(error)
        }
        // Save the image so we won't have to keep fetching it if they scroll
        self.imageCache[urlString] = image
        if let cellToUpdate = self.tableView?.cellForRowAtIndexPath(indexPath) {
          cellToUpdate.imageView?.image = image // will work fine even if image is nil 
          // need to reload the view, which won't happen otherwise
          // since this is in an async call
          cellToUpdate.setNeedsLayout()
        }
      })
    }
  } else {
    cell.imageView?.image = nil 
  }

  return cell 
}

为了测试这些代码，需要设置一个断点，并单步执行看看代码是如何执行的。在需要设置断点的前面的行号中点击一下就可以设置断点了:

然后运行。当运行到断点时会停止。这时你可以通过Xcode底部的面板查看变量的值，并逐步调试：

点击step over按钮执行下一句:

通过查看高亮显示的代码行，可以知道哪个代码路径被执行。如果头像URL有值，那么将尝试加载：

如果没有，单元格将被设置为nil：

如果想继续执行直到下一个断点，可以点击continue按钮:

当你每次运行App的时候，所有的图像在第一次显示的时候都将通过URL进行加载，因为这里我们并没有将缓存持久化。在下个小节我们将解决这个问题。当我们在屏幕上来回滚动时，表格视图将重复利用了已缓存的图像。你可以在我们从缓存中加载图像的代码处设置一个断点，这样就可以很方便的查看缓存是如何被复用的啦：

当单元格初始化完成后，上下滚动时，你将看到断点处的代码被执行。

更好的缓存: PINRemoteImage

我们通过Alamofire的请求从JSON数据中解析出图像的URL，通过异步请求的方式把加载的图片设置给UITableViewCell。然后我们建立一个初级的缓存，在单次运行中让图片可以被复用，从而帮我们避免了重复请求。当然，在发行版的APP中还是需要建立一个可以持久化的缓存机制，以便在多次运行中图片都可以复用。

PINRemoteImage是一个支持图片持久化的缓存处理库，那么接下来我们使用它，使得所要加载的图片只需要加载一次，并可以被重复使用。而且PINRemoteImage要比我们的非持久化缓存更容易集成和使用。

使用CocoaPods将PINRemoteImage v1.2加入到你的工程中。并在MasterViewController中引入，然后删除我们刚才写的缓存代码:

import UIKit
import PINRemoteImage
  
class MasterViewController: UITableViewController {
  ...
  
  ~~var imageCache: Dictionary<String, UIImage?> = Dictionary<String, UIImage?>()~~

  ...
}

PINRemoteImage最好和一个占位符图像一起使用。你可以把一个图像拖入到工程中，并把它改名为placeholder.png。这样如果用户没有设置头像的话，会显示我们刚才设置的占位符图像：

override func tableView(tableView: UITableView, cellForRowAtIndexPath
  indexPath: NSIndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)
    
  let gist = gists[indexPath.row] 
  cell.textLabel!.text = gist.description 
  cell.detailTextLabel!.text = gist.ownerLogin 
  cell.imageView?.image = nil
   
  // set cell.imageView to display image at gist.ownerAvatarURL
  if let urlString = gist.ownerAvatarURL, url = NSURL(string: urlString) { 
    cell.imageView?.pin_setImageFromURL(url, placeholderImage:
      UIImage(named: "placeholder.png")) 
  } else {
    cell.imageView?.image = UIImage(named: "placeholder.png")
  }
  
  return cell 
}

小结

保存并运行。你会发现如果用户设置了头像的话将被加载显示，否则显示我们所设置的占位符图像：

点击这里可以下载本章的最终代码。