1. 首页
  2. IT资讯

JavaScript Fetch API 新手入门指导

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F8d09c734a87445e6b9119496920ddaf1″ img_width=”1600″ img_height=”800″ alt=”JavaScript Fetch API 新手入门指导” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E自从Fetch API 问世以来,我们就能使用漂亮的语法发送HTTP Request 或取后台接口数据,这篇文章将会分享我自己常用的Fetch方法( GET、POST、搭配await 或promise.all…等) ,随着浏览器的普遍支持,也就不太需要使用XMLHttpRequest 或jQuery AJAX,我们的代码看起来也就更加简洁干净啰~u003Cu002Fpu003Eu003Ch1u003EFetch 基本用法u003Cu002Fh1u003Eu003Cpu003Efetch()方法,包含了需要fetch 的网址和对应的属性设定( 例如method、headers、mode、body…等,最基本的写法属性不一定要填),执行之后会送出Request,如果得到回应就会回传带有Response 的Promise 内容,使用then 将回传值传递下去。u003Cu002Fpu003Eu003Cpreu003Efetch(‘网址’)u003Cbru003E.then(function(response) {u003Cbru003E u002Fu002F 处理 responseu003Cbru003E}).catch(function(err) {u003Cbru003E u002Fu002F 错误处理u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E举例来说,通过天气数据开放平台可以取得许多气象资料(例如阿里云的API开放平台),下面的示例获取北京的当日气温,因为结果返回为json格式,所以在fetch取得数据之后,通过json()的方法处理数据,接着传递到下一层,就能显示出「北京市的当日气温」。u003Cu002Fpu003Eu003Cpreu003Efetch(‘天气数据开放平台网址’)u003Cbru003E.then(res => {u003Cbru003E return res.json();u003Cbru003E}).then(result => {u003Cbru003E let city = result.cwbopendata.location[14].parameter[0].parameterValue;u003Cbru003E let temp = result.cwbopendata.location[14].weatherElement[3].elementValue.value;u003Cbru003E console.log(`${city}的当前气温 ${temp} 摄氏度`); u002Fu002F 得到 北京市的气温 29.30摄氏度u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003EFetch 的 Request 属性u003Cu002Fh1u003Eu003Cpu003E以下列出Fetch常用的的Request属性。(更多属性请参考fetch Request )u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fff3b611427d1444a9b53daa74963b393″ img_width=”1598″ img_height=”740″ alt=”JavaScript Fetch API 新手入门指导” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003EFetch 的Response 属性u003Cu002Fh1u003Eu003Cpu003E以下列出Fetch常用的Response属性。(更多属性和方法请参考fetch Response )u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002Fdcd7429794314740a810526c2580ed85″ img_width=”1604″ img_height=”580″ alt=”JavaScript Fetch API 新手入门指导” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003EFetch 的Response 方法u003Cu002Fh1u003Eu003Cpu003E以下列出Fetch常用的Response方法。(更多属性和方法请参考fetch Response )u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F10d017fe8307458a91cf89bee8bf2f4b” img_width=”1602″ img_height=”650″ alt=”JavaScript Fetch API 新手入门指导” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003EFetch 的Get 用法u003Cu002Fh1u003Eu003Cpu003EGet 是Fetch 最简单的方法,使用Get 必须要将fetch 第二个参数里的method 设定为get,如果遇到跨域问题,就搭配其他属性例如mode、credentials 来进行细部设定( 但针对非跨域的就没用了),下方的示例我做了一个简单的后端请求,通过fetch 传递姓名和年纪的参数,就会看到后端回应一串文字。u003Cu002Fpu003Eu003Cpreu003Econst name = ‘oxxo’;u003Cbru003Econst age = 18;u003Cbru003Econst uri = `https:u002Fu002F网址u002Fexec?name=${name}&age=${age}`;u003Cbru003Efetch(uri, {method:’GET’})u003Cbru003E.then(res => {u003Cbru003E return res.text(); u003Cbru003Eu002Fu002F 使用 text() 可以得到纯文字 Stringu003Cbru003E}).then(result => {u003Cbru003E console.log(result); u003Cbru003Eu002Fu002F 得到「你的名字是:oxxo,年紀:18 岁。」u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003EFetch 的Post 用法u003Cu002Fh1u003Eu003Cpu003E使用POST方法可以搭配body属性设定传递参数,比如我的接口地址,可以接收name和age所组成的JSON请求,当网址接收到要求后,就会回应一个json对象,需要注意的是,如果是传递「中文」可能会出现乱码,这时可以使用encodeURI来做转码,且要通过JSON.stringify来转换成string方式传递。u003Cu002Fpu003Eu003Cpreu003Econst uri = ‘网址’;u003Cbru003Efetch(uri, {u003Cbru003E method:’POST’,u003Cbru003E body:encodeURI(JSON.stringify({u003Cbru003E name:’oxxo’,u003Cbru003E age:18u003Cbru003E })),u003Cbru003E headers: {u003Cbru003E ‘Content-Type’: ‘applicationu002Fx-www-form-urlencoded; charset=utf-8’u003Cbru003E }u003Cbru003E})u003Cbru003E.then(res => {u003Cbru003E return res.json(); u003Cbru003Eu002Fu002F 使用 json() 可以得到 json 对象u003Cbru003E}).then(result => {u003Cbru003E console.log(result);u003Cbru003E u002Fu002F 得到 {name: “oxxo”, age: 18, text: “你的名字是 oxxo,年纪18岁~”}u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003EFetch 搭配async、await、promise.allu003Cu002Fh1u003Eu003Cpu003E过去在XMLHttpRequest 或jQuery AJAX 的全盛时期,如果要确保每个GET 或POST 的要求,都要按照指定的顺序进行,往往会用上一连串的callback 辅助,但是当callback 越来越多,代码也就越来越难管理,然而fetch 返回的是一个Promise,我们也就能直接利用await 或promise.all 的作法,轻松掌握同步与非同步之间的转换。u003Cu002Fpu003Eu003Cpu003E下方的例子是一个非同步的示例,因为没有进行任何的同步处理,所以执行之后,会先出现hello的文字,接着才是通过fetch 得到的结果。u003Cu002Fpu003Eu003Cpreu003Econst postURL = (name,age) => {u003Cbru003E const uri = ‘https:u002Fu002F网址;u003Cbru003E return fetch(uri, {u003Cbru003E method:’POST’,u003Cbru003E body:encodeURI(JSON.stringify({u003Cbru003E name:name,u003Cbru003E age:ageu003Cbru003E })),u003Cbru003E headers: {u003Cbru003E ‘Content-Type’: ‘applicationu002Fx-www-form-urlencoded; charset=utf-8’u003Cbru003E }u003Cbru003E })u003Cbru003E .then(res => {u003Cbru003E return res.json();u003Cbru003E }).then(result =>{u003Cbru003E console.log(result);u003Cbru003E });u003Cbru003E};u003Cbru003EpostURL(‘oxxo’,18);u003Cbru003Econsole.log(‘hello!!!’);u003Cbru003EpostURL(‘tom’,18);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E因为fetch 的特性,可以改成async 和await 的写法,执行后也就能按照我们要的顺序进行。u003Cu002Fpu003Eu003Cpreu003Easync function(){ u002Fu002F 设定为 asyncu003Cbru003E const postURL = (name,age) => {u003Cbru003E const uri = ‘https:u002Fu002F网址’;u003Cbru003E return fetch(uri, {u003Cbru003E method:’POST’,u003Cbru003E body:encodeURI(JSON.stringify({u003Cbru003E name:name,u003Cbru003E age:ageu003Cbru003E })),u003Cbru003E headers: {u003Cbru003E ‘Content-Type’: ‘applicationu002Fx-www-form-urlencoded; charset=utf-8’u003Cbru003E }u003Cbru003E })u003Cbru003E .then(res => {u003Cbru003E return res.json();u003Cbru003E }).then(result =>{u003Cbru003E console.log(result);u003Cbru003E });u003Cbru003E };u003Cbru003E await postURL(‘oxxo’,18); u003Cbru003Eu002Fu002F 使用 awaitu003Cbru003E console.log(‘hello!!!’);u003Cbru003E await postURL(‘tom’,18); u003Cbru003Eu002Fu002F 使用 awaitu003Cbru003E}();u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E最后那段await 的代码,也可以改成promise.all 的方法,就会先fetch,然后再出现hello的文字,不过也因为promise.all无法保证其载入顺序,就可能会发生tom 在oxxo之前出现的状况呦。u003Cu002Fpu003Eu003Cpreu003Eawait Promise.all([postURL(‘oxxo’,18), postURL(‘tom’,18)]);u003Cbru003Econsole.log(‘hello!!!’);u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E兼容性u003Cu002Fh1u003Eu003Cpu003E说了这么多,你一定关心这个API的兼容性,现代浏览器大部分还是支持的,可以放心使用,如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F350e23e899cf44af82a7806e59a60df2″ img_width=”2530″ img_height=”778″ alt=”JavaScript Fetch API 新手入门指导” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cblockquoteu003Eu003Cpu003E文章来源:https:u002Fu002Fwww.oxxostudio.twu002Farticlesu002F201908u002Fjs-fetch.htmlu003Cu002Fpu003Eu003Cpu003E原文作者:oxxostudiou003Cu002Fpu003Eu003Cpu003E由于网页为繁体内容,术语描述和话术与我们有差异的问题,笔者在保证不改变原意的基础上做了调整,并在此基础上进行了错误校正,如发现问题,欢迎你的指正u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F15178e0e-172c-4bbd-b323-191de92b4d6e” img_width=”1200″ img_height=”600″ alt=”JavaScript Fetch API 新手入门指导” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E小结u003Cu002Fh1u003Eu003Cpu003EFetch API 的神奇,简化了许多原本较为复杂的用法,也让项目代码写起来更加干净易读好维护。u003Cu002Fpu003Eu003Cpu003E更多参考资源:u003Cu002Fpu003Eu003Cpu003EMDN:Using Fetchu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Fdeveloper.mozilla.orgu002Fzh-CNu002Fdocsu002FWebu002FAPIu002FFetch_APIu002FUsing_Fetchu003Cu002Fpu003Eu003Cpu003EAJAX 与Fetch APIu003Cu002Fpu003Eu003Cpu003Ehttps:u002Fu002Feyesofkids.gitbooks.iou002Fjavascript-start-from-es6u002Fcontentu002Fpart4u002Fajax_fetch.htmlu003Cu002Fpu003Eu003Cpu003E更多精彩内容,请u003Cstrongu003E关注“前端达人”公众号u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:JavaScript Fetch API 新手入门指导

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10722.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code