JavaScript Fetch API 新手入门指南

关注前端达人，与你共同进步

文章来源：https://www.oxxostudio.tw/articles/201908/js-fetch.html

原文作者：oxxostudio

由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，并在此基础上进行了错误校正，如发现问题，欢迎你的指正。

开篇

自从Fetch API 问世以来，我们就能使用漂亮的语法发送HTTP Request 或取后台接口数据，这篇文章将会分享我自己常用的Fetch方法( GET、POST、搭配await 或promise.all...等) ，随着浏览器的普遍支持，也就不太需要使用XMLHttpRequest 或jQuery AJAX，我们的代码看起来也就更加简洁干净啰～

01

Fetch 基本用法

fetch()方法，包含了需要fetch 的网址和对应的属性设定( 例如method、headers、mode、body...等，最基本的写法属性不一定要填)，执行之后会送出Request，如果得到回应就会回传带有Response 的Promise 内容，使用then 将回传值传递下去。

fetch('网址')
    .then(function(response) {
// 处理 response
    }).catch(function(err) {
// 错误处理
});

举例来说，通过天气数据开放平台可以取得许多气象资料（例如阿里云的API开放平台），下面的示例获取北京的当日气温，因为结果返回为json格式，所以在fetch取得数据之后，通过json()的方法处理数据，接着传递到下一层，就能显示出「北京市的当日气温」。

fetch('天气数据开放平台网址')
    .then(res => {
        return res.json();
    }).then(result => {
    let city = result.cwbopendata.location[14].parameter[0].parameterValue;
    let temp = result.cwbopendata.location[14].weatherElement[3].elementValue.value;
    console.log(`${city}的当前气温 ${temp} 摄氏度`); // 得到 北京市的气温 29.30摄氏度
});

02

Fetch 的 Request 属性

以下列出Fetch常用的的Request属性。(更多属性请参考fetch Request )

属性	设定值
url	第一个参数，必填项，代表需要fetch对象的网址
method	GET、POST、PUT、DELETE、HEAD ( 默认GET )
headers	设置相关的Headers 内容( 预设{} )
mode	cors、no-cors、same-origin、navigate ( 默认cors )
referrer	no-referrer、client 或某个网址( 默认client )
credentials	omit、same-origin、include ( 默认omit )
redirect	follow、error、manual ( 默认manual )
cache	default、no-store、reload、no-cache、force-cache ( 默认default )

03

Fetch 的Response 属性

以下列出Fetch常用的Response属性。(更多属性和方法请参考fetch Response )

属性	设定值
headers	包含与response 相关的Headers 内容
ok	成功返回true，不成功返回alse
status	状态代码，成功为200
statusText	状态信息，成功为ok
type	response 的类型，例如basic、cors...等
url	response 的url

04

Fetch 的Response 方法

以下列出Fetch常用的Response方法。(更多属性和方法请参考fetch Response )。

属性	设定值
json()	返回Promise，resolves 是JSON 对象
text()	返回Promise，resolves 是text string
blob()	返回Promise，resolves 是blob ( 非结构化对象，例如文字或二进制信息)
arrayBuffer()	返回Promise，resolves 是ArrayBuffer ( 有多少bytes )
formData()	返回Promise，resolves 是formData ( 表单资料对应的的Key 或Value )
clone()	创建一个Response对象的克隆。
error()	返回Response 的错误内容

05

Fetch 的Get 用法

Get 是Fetch 最简单的方法，使用Get 必须要将fetch 第二个参数里的method 设定为get，如果遇到跨域问题，就搭配其他属性例如mode、credentials 来进行细部设定( 但针对非跨域的就没用了)，下方的示例我做了一个简单的后端请求，通过fetch 传递姓名和年纪的参数，就会看到后端回应一串文字。

const name = 'oxxo';
const age = 18;
const uri = `https://网址/exec?name=${name}&age=${age}`;
fetch(uri, {method:'GET'})
    .then(res => {
        return res.text();
// 使用 text() 可以得到纯文字 String
    }).then(result => {
    console.log(result);
// 得到「你的名字是：oxxo，年紀：18 岁。」
});

06

Fetch 的Post 用法

使用POST方法可以搭配body属性设定传递参数，比如我的接口地址，可以接收name和age所组成的JSON请求，当网址接收到要求后，就会回应一个json对象，需要注意的是，如果是传递「中文」可能会出现乱码，这时可以使用encodeURI来做转码，且要通过JSON.stringify来转换成string方式传递。

const uri = '网址';
fetch(uri, {
    method:'POST',
    body:encodeURI(JSON.stringify({
        name:'oxxo',
        age:18
    })),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    }
})
    .then(res => {
        return res.json();
// 使用 json() 可以得到 json 对象
    }).then(result => {
    console.log(result);
// 得到 {name: "oxxo", age: 18, text: "你的名字是 oxxo，年纪18岁～"}
});

07

Fetch 搭配async、await、promise.all

过去在XMLHttpRequest 或jQuery AJAX 的全盛时期，如果要确保每个GET 或POST 的要求，都要按照指定的顺序进行，往往会用上一连串的callback 辅助，但是当callback 越来越多，代码也就越来越难管理，然而fetch 返回的是一个Promise，我们也就能直接利用await 或promise.all 的作法，轻松掌握同步与非同步之间的转换。

下方的例子是一个非同步的示例，因为没有进行任何的同步处理，所以执行之后，会先出现hello的文字，接着才是通过fetch 得到的结果。

const postURL = (name,age) => {
    const uri = 'https://网址;
    return fetch(uri, {
        method:'POST',
        body:encodeURI(JSON.stringify({
            name:name,
            age:age
        })),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
        }
    })
        .then(res => {
            return res.json();
        }).then(result =>{
            console.log(result);
        });
};
postURL('oxxo',18);
console.log('hello!!!');
postURL('tom',18);

因为fetch 的特性，可以改成async 和await 的写法，执行后也就能按照我们要的顺序进行。

await Promise.all([postURL('oxxo',18), postURL('tom',18)]);
console.log('hello!!!');

08

兼容性

说了这么多，你一定关心这个API的兼容性，现代浏览器大部分还是支持的，可以放心使用，如下图所示：

Fetch API 的神奇，简化了许多原本较为复杂的用法，也让项目代码写起来更加干净易读好维护。更重要的是 JavaScript ES6 原生支持，你不需要安装任何依赖包，直接可以在项目中使用。

精彩推荐

React TS3丨亲自动手创建一个类组件（class component）

React TS3 丨从创建第一个 React TypeScript3 项目开始

css基础丨你想知道的伪元素内容都在这篇文章里（长文值得收藏）

css基础丨一次搞懂CSS 字体单位：px、em、rem 和 %

css基础丨只用1个div，你能用CSS常规属性绘制：正3、4、5、6、7、8边形吗？

CSS 3D 专题丨搞懂 CSS 3D，你必须理解 perspective（视域）这个属性

JS基础丨Array 数组操作方法大全( 含ES6 )

JS小技巧丨随机不重复的ID，模板标签替换，XML与字符串互转，快速取整

CSS 3D 专题丨学习前，你需要搞明白什么是CSS 3D？

css实用手册丨CSS 垂直居中的七种方法，值得收藏

Web Animation API丨用原生JS制作一个图片随机移动的动画

十款热门的Vue.js工具和库

vue基础丨新手入门篇（一）

小技巧丨console的用法，不仅仅只有console.log()

动画基础丨点和直线

太惊艳了，这些画都是CSS的杰作！

css基础丨Transforms 属性在实际项目中如何应用？

css基础丨如何理解transform的matrix()用法

css基础丨如何理解Display的属性：None，Block，Inline，Inline-Block

ES6基础丨let和作用域

ES6基础丨const介绍

ES6基础丨默认参数值

ES6基础丨展开语法（Spread syntax）

ES6基础丨解构赋值（destructuring assignment）

ES6基础丨箭头函数（Arrow functions）

ES6基础丨模板字符串（Template String）

ES6基础丨Set与WeakSet

ES6基础丨Map与WeakMap

ES6基础丨Symbol介绍：独一无二的值

ES6基础丨Object的新方法

ES6基础丨迭代器（iterator）

ES6基础丨生成器（Generator）

ES6基础丨你需要知道的Array数组新方法（上）

数据结构基础丨栈简介（使用ES6）

数据结构基础丨队列简介（使用ES6）

JavaScript基础丨前端不懂它，会再多框架也不过只是会用而已！

JavaScript基础丨你真的了解JavaScript吗?

JavaScript基础丨回调(callback)是什么?

JavaScript基础丨Promise使用指南

JavaScript基础丨深入学习async/await

JS加载慢？谷歌大神带你飞!(文末送电子书)

19年你应该关注这50款前端热门工具（上）

19年你应该关注这50款前端热门工具（中）

19年你应该关注这50款前端热门工具（下）

专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

长按关注"前端达人"