fetch

最新推荐文章于 2024-03-29 09:58:57 发布

原创最新推荐文章于 2024-03-29 09:58:57 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了fetch API的基本用法，包括如何发送请求和接收数据。通过示例展示了fetch的简洁写法及其在网络数据请求中的应用。

fetch()，是W3C的标准，里面传的参数是请求地址；
fetch写法：fetch(“请求地址”).then(res=>{
返回数据
}).then(res=>{ 接受数据 })

fetch("test.json").then(function(res){
            return res.json();//返回json文件
        }).then(res=>{
            console.log(res)  //拿到数据
        })

还可这样写

fetch("test.json").then(res=>res.json()).then(res=>{
            console.log(res);
        })

在这里插入图片描述
fetch()数据请求应用

在这里插入图片描述

var vm = new Vue({
            el:"#box",
            data:{
                datalist:[]
            },
            methods:{
                handleClick(){
                    fetch("test.json").then(res=>res.json()).then(res=>{
                    // console.log(res.data.films);//查看引用数据
                    this.datalist = res.data.films;
                    })
                }
            }
        })

效果
在这里插入图片描述