JavaScript Fetch API 新手入门指导

文章插图
自从Fetch API 问世以来 , 我们就能使用漂亮的语法发送HTTP Request 或取后台接口数据 , 这篇文章将会分享我自己常用的Fetch方法( GET、POST、搭配await 或promise.all...等) , 随着浏览器的普遍支持 , 也就不太需要使用XMLHttpRequest 或jQuery AJAX , 我们的代码看起来也就更加简洁干净啰~
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摄氏度});Fetch 的 Request 属性以下列出Fetch常用的的Request属性 。(更多属性请参考fetch Request )

文章插图
【JavaScript Fetch API 新手入门指导】
Fetch 的Response 属性以下列出Fetch常用的Response属性 。(更多属性和方法请参考fetch Response )

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

文章插图
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 岁 。」});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岁~"}});Fetch 搭配async、await、promise.all过去在XMLHttpRequest 或jQuery AJAX 的全盛时期 , 如果要确保每个GET 或POST 的要求 , 都要按照指定的顺序进行 , 往往会用上一连串的callback 辅助 , 但是当callback 越来越多 , 代码也就越来越难管理 , 然而fetch 返回的是一个Promise , 我们也就能直接利用await 或promise.all 的作法 , 轻松掌握同步与非同步之间的转换 。
下方的例子是一个非同步的示例 , 因为没有进行任何的同步处理 , 所以执行之后 , 会先出现hello的文字 , 接着才是通过fetch 得到的结果 。
推荐阅读
- Chain of Responsibility... JavaScript职责链模式
- JavaScript命名空间常用方法
- javaAPI解读
- Strategy Pattern JavaScript设计模式之策略模式
- API网关在微服务架构中的应用
- JavaScript中变量和作用域
- JavaScript都得知道这3个数组方法
- 腾讯API 地图相关使用
- 后端开发必备的 RestFul API 知识
- javascript 创建对象常用几种方式