Swift 4中用Alamofire解析API并在TableView展示指定字段的问题

Hey there! Let's walk through this step by step—since you're just getting started with JSON and Alamofire, I'll make sure each part is straightforward and easy to follow.

1. 定义数据模型（用Codable解析JSON） #

首先我们需要把API返回的JSON结构转换成Swift的模型，Swift自带的Codable协议能帮我们自动完成大部分解析工作，不用手动写繁琐的解析逻辑。

根据你的API结构，我们需要两个模型：一个包裹外层的data数组，另一个对应每个条目的具体字段：

// 单个条目模型，只保留我们需要展示的字段
struct Transaction: Codable {
    let id: Int
    let amountDisplay: String
    let accountBalanceDisplay: String
    
    // 因为JSON里的键是蛇形命名（比如amount_display），我们需要映射到Swift的驼峰命名属性
    enum CodingKeys: String, CodingKey {
        case id
        case amountDisplay = "amount_display"
        case accountBalanceDisplay = "account_balance_display"
    }
}

// 根模型，对应整个API返回的JSON结构
struct APIResponse: Codable {
    let data: [Transaction]
}

2. 用Alamofire发起请求并解析数据 #

接下来我们用Alamofire发送网络请求，获取并解析JSON数据，把解析后的数组存起来作为TableView的数据源。

假设你已经在项目里集成了Alamofire（如果还没，用CocoaPods或Swift Package Manager添加即可）：

import Alamofire
import UIKit

class TransactionListVC: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    // 数据源数组，用来存解析后的交易数据
    private var transactions: [Transaction] = []
    private let tableView = UITableView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        fetchTransactionData()
    }
    
    // 发起网络请求并解析数据
    private func fetchTransactionData() {
        let apiURL = "你的API实际地址" // 替换成你调用的API链接
        
        AF.request(apiURL)
            .validate() // 自动验证HTTP状态码（200-299区间视为成功）
            .decodable(of: APIResponse.self) // 用Alamofire的扩展直接解析成我们的模型
            .response { [weak self] response in
                guard let self = self else { return }
                
                switch response.result {
                case .success(let apiResponse):
                    // 解析成功，更新数据源并刷新TableView
                    self.transactions = apiResponse.data
                    self.tableView.reloadData()
                case .failure(let error):
                    // 请求或解析失败，这里可以加弹窗提示用户，或者打印日志排查问题
                    print("请求出错啦：\(error.localizedDescription)")
                }
            }
    }
    
    // 配置TableView的布局和基础设置
    private func setupTableView() {
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)
        
        // 设置全屏约束（可根据你的布局需求调整）
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
        ])
        
        // 注册单元格（这里用系统默认单元格，也可以自定义单元格优化布局）
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "TransactionCell")
        tableView.dataSource = self
        tableView.delegate = self
    }
    
    // MARK: - UITableView 数据源方法
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // 返回数据源数组的长度，就是TableView的行数
        return transactions.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TransactionCell", for: indexPath)
        let currentTransaction = transactions[indexPath.row]
        
        // 把三个字段展示在单元格里，这里用系统默认的内容配置，也可以自定义单元格用StackView排列三个Label
        var content = cell.defaultContentConfiguration()
        content.text = "ID: \(currentTransaction.id)"
        content.secondaryText = "金额: \(currentTransaction.amountDisplay) | 账户余额: \(currentTransaction.accountBalanceDisplay)"
        cell.contentConfiguration = content
        
        return cell
    }
}

3. 额外优化建议 #

• 如果API需要身份验证（比如Token），可以在AF.request里添加请求头：AF.request(apiURL, headers: ["Authorization": "Bearer your_token_here"])
• 建议自定义UITableViewCell，用StackView把三个字段的Label整齐排列，比用默认单元格的主次文本展示效果更好
• 可以添加加载指示器（ActivityIndicator），在请求发起时显示，请求结束后隐藏，提升用户体验

内容的提问来源于stack exchange，提问作者madhatter989