大家好，距离完赛越来越近了，过完最後一天的双十连假，心情也开始忧郁了QQ，还好本系列复杂的文章差不多都介绍完了，终於不用再熬夜了。

什麽是fetch?

今天要来聊聊的是Javascript原生请求资料的方式fetch。记得以前还没有fetch时，得透过XMLHttpRequest或是jQuery的AJAX，自从有了fetch就再也回不去了，首先我们去MDN看看fetch的说明：

Fetch API 提供了一种 JavaScript Interface 来操作 HTTP pipeline，比方 request 和 response。同时它也提供了 global 的 fetch() method，使得在网路上非同步地 fetch resources 这件事变得简单易懂

另外小弟认为fetch具有以下特点：

• 原生javascript语法，不需引入其他library
• 用法类似jQuery的Ajax，无痛接轨
• Promise语法可以避免callback hell的情形

目前各个浏览器也几乎都有支援，除了你知道的IE (下图截自caniuse.com)

fetch如何使用?

直接来看看怎麽操作：

fetch('/src/json/product.json', {})
    .then((res) => res.json())
    .then((data) => {
            console.log(data)
        })
    })

查阅MDN说明，fetch第一个参数放入请求来源的URI，第二个参数是选用的，可以传送一个 init Object 来设定 request。

由於fetch本身是Promise物件，需要搭配then进行下一步的处理。由於在第一个then会拿到Promise结果，需要对Body的资料类型进行resolved 後才能取得资料，以下是resolve的方法(详细可查看MDN)：

• arrayBuffer()
• blob()
• json()
• text()
• formData()

用fetch处理GET请求

这边我们直接演示一个范例吧，用前天建立的商品页Product.js来做出商品列表(请求的范例JSON放在这里)：

src/pages/Product.js：

import { App } from './App'
 
export const Product = {
    mount: () => {
        fetch('/src/json/product.json', {})
            .then((res) => res.json())
            .then((data) => {
                const productList = document.querySelector('#productList')
 
                data.result.forEach((item) => {
                    productList.innerHTML += `
                        <div class="col-md-4 mb-3">
                            <div class="card">
                                <div class="overflow-hidden" style="height:150px"><img src="${item.image}" class="img-fluid" alt="${item.name}" style="width:100%"></div>
                                <div class="card-body">
                                    <h5 class="font-weight-bold">${item.name}</h5>
                                    <h6>$ ${item.price}</h6>
                                    <h6>${item.desc}</h6>
                                    <a href="#/product/detail/${item.id}" class="btn btn-block btn-primary">
                                        <i class="fas fa-shopping-cart"></i> 购买
                                    </a>
                                </div>
                            </div>
                        </div>
                    `
                })
            })
    },
    render: (props) => {
        const content = `            
            <div class="container">
                <h3>${props.category}</h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">${props.category}</li>
                    </ol>
                </nav>
                <div id="productList" class="row"></div>
            </div>
        `
 
        return App.render(content)
    },
}

这里在mount方法中使用fetch的GET方法来请求资料，且不带入第二个参数。解析Promise物件资料，并将资料内容转为JSON格式做处理，商品图片已转为base64字串，加上其余资料使用forEach依序塞入HTML，结果会像下面这样：

以上就是使用fetch来请求资料，这里暂时告个段落，明天再来进一步谈谈fetch的POST请求，我们明天见!

参考资料：
铁人赛：ES6 原生 Fetch 远端资料方法