使用Fetch API和JSON时出现问题

时间:2018-01-07 01:29:07

标签: javascript json fetch

我在与json文件正确交互时遇到了一些麻烦。我使用fetch API来获取我的json文件但是在将响应记录到控制台时,实际上没有返回任何数据。相反,我只是得到某种标题响应。



"use strict";

fetch('https://www.jasonbase.com/things/wAe3.json')
.then((data) => {
   console.log(data); 
})
.catch((err) => {
    if(err) console.log(err);
});




理想情况下,我可以从以下json文件中检索每个属性:



{
  "completed-works": {
    "example1": {
      "title": "Example A",
      "date": "1-6-18",
      "time": "8 : 23 PM",
      "preview": "Liquorice lollipop sugar plum pie dragée chocolate. Cotton candy jelly-o pie. Bear claw chocolate cake liquorice. Chocolate brownie lemon drops. Biscuit cupcake croissant lollipop. Tootsie roll lollipop cupcake bonbon. Sesame snaps tart toffee tart. Donut marshmallow danish cake chocolate cake jelly-o sweet. Apple pie cake pudding oat cake caramels chocolate cake chocolate cake caramels wafer.",
      "body": "Liquorice lollipop sugar plum pie dragée chocolate. Cotton candy jelly-o pie. Bear claw chocolate cake liquorice. Chocolate brownie lemon drops. Biscuit cupcake croissant lollipop. Tootsie roll lollipop cupcake bonbon. Sesame snaps tart toffee tart. Donut marshmallow danish cake chocolate cake jelly-o sweet. Apple pie cake pudding oat cake caramels chocolate cake chocolate cake caramels wafer. Cheesecake brownie pudding macaroon chocolate bar chocolate cake oat cake. Jujubes lemon drops candy canes halvah chupa chups dragée candy canes biscuit. Ice cream tiramisu jelly chocolate bar halvah sugar plum chocolate cheesecake chupa chups. Croissant ice cream chocolate cake jelly donut marzipan biscuit. Chupa chups topping jujubes dessert topping lollipop danish bear claw lemon drops. Candy tart icing sesame snaps jujubes soufflé gingerbread. Gummi bears bonbon marzipan jelly fruitcake sweet roll pudding. Tiramisu icing carrot cake cake cake macaroon gummi bears tootsie roll donut. Fruitcake cotton candy tootsie roll cheesecake muffin bonbon gingerbread. Lollipop chocolate bar marshmallow sugar plum caramels lemon drops donut. Candy canes ice cream chocolate cookie icing gummies croissant jelly beans sweet. Cookie bonbon sweet. Pie pie fruitcake danish gummies. Jelly halvah brownie lollipop tootsie roll. Chupa chups fruitcake sesame snaps sweet powder donut candy canes cotton candy. Pudding apple pie tart. Bear claw jujubes croissant liquorice lollipop tart sugar plum wafer candy canes. Pudding donut cupcake jelly beans bear claw Candy canes cupcake bonbon biscuit. Icing jelly cake jelly-o sweet roll tootsie roll cookie gummi bears jelly beans. Gummi bears chocolate bar cheesecake cotton candy chocolate bar chocolate cookie tiramisu. Sweet roll cheesecake macaroon powder apple pie gummi bears. Lollipop sweet roll dessert. Powder marzipan sweet roll tart sesame snaps sweet roll caramels chocolate cake. Carrot cake chocolate bar jujubes toffee powder bear claw. Pastry tart tiramisu dragée pudding. Pie gummi bears lemon drops. Tiramisu powder chupa chups cake gummi bears. Sweet ice cream sugar plum. Lemon drops brownie candy canes. Carrot cake sweet roll pie. Marzipan carrot cake cotton candy soufflé. Brownie candy jelly beans ice cream carrot cake marzipan. Gummies lemon drops halvah pie muffin jelly beans muffin pie danish. Muffin sweet marshmallow chupa chups cheesecake. Topping chocolate gingerbread jujubes. Cake macaroon cotton candy candy dessert dragée apple pie toffee oat cake. Gingerbread powder caramels gummies cheesecake pastry cheesecake cookie bonbon. Lemon drops tart bonbon dessert cheesecake carrot cake candy canes. Bonbon jujubes cotton candy cookie pudding danish. Marzipan ice cream pie wafer cake. Toffee bear claw chocolate cake oat cake. Chupa chups sesame snaps caramels cheesecake. Cotton candy tart sweet roll tiramisu jelly soufflé bear claw donut cake."
    }
  }
}




提前致谢。

2 个答案:

答案 0 :(得分:2)

你必须得到这样的json:

"use strict";

fetch('https://www.jasonbase.com/things/wAe3.json')
.then((response) => {
   return response.json()
})
.then((data) => {
   console.log(data); 
})
.catch((err) => {
    if(err) console.log(err);
});

答案 1 :(得分:0)

获取网址后,需要执行.then(response => response.json()),这样您就可以访问属性:title,id或time

祝你好运