fetch请求get/post_fetch get post-CSDN博客

本文链接：https://blog.csdn.net/printf_hello/article/details/104432544

本文详细介绍了如何使用Fetch API进行HTTP请求，包括GET和POST方法的使用，解析JSON响应，以及在Vue.js中集成Fetch API实现数据的动态加载和更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fetch的基本格式

fetch('http://jsonplaceholder.typicode.com/todos')
  .then(res =>{
  })
  .then(data=>{
  });

它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json() 方法:

 fetch("http://jsonplaceholder.typicode.com/todos")
              .then(res => {
                  return res.json();
              })
              .then(todos => {
                  this.todos = todos;
              })

post上传JSON数据：

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

fetch('http://jsonplaceholder.typicode.com/todos', {
                    method: 'post',
                    body: JSON.stringify(this.item),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    return res.json()
                })
                    .catch(err => {
                        console.log(err);
                    })
                    .then(item => {
                        this.todos.unshift(item);
                    })
                    .catch(err => {
                        console.log(err);
                    })

在这里插入图片描述

<body>
<div id="app">
    <button @click="show">show</button>
    <br>
    <form @submit.prevent="submit">
        <input type="text" v-model="item.title">
        <input type="checkbox" v-model="item.completed">
        <input type="submit">
    </form>
    <ul ref="oul" v-for="(todo,index) in todos" v-show="todo.completed">
        <li>{{ todo.id }}</li>
        <li>{{ todo.title }}</li>
        <li>{{ todo.completed }}</li>
    </ul>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                todos: [],
                item: {title: '', completed: false}
            }
        },
        //mounted 代码写里面自动执行，省的调用方法了。
        mounted() {
            fetch("http://jsonplaceholder.typicode.com/todos")
                .then(res => {
                    return res.json();//要让下面接受到请求到的数据，这就要return出去，这样下面的todos，即参数就是return出去的数据了，应该是这么事
                })
                .then(todos => {
                    this.todos = todos;
                })
        },
        methods: {
            show() {
                for (let i = 0; i < this.$refs.oul.length; i++) {
                    this.$refs.oul[i].style.cssText = "display: block";
                }
            },
            submit() {
                fetch('http://jsonplaceholder.typicode.com/todos', {
                    method: 'post',
                    body: JSON.stringify(this.item),
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                    return res.json()
                })
                    .catch(err => {
                        console.log(err);
                    })
                    .then(item => {
                        this.todos.unshift(item);
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
        }
    })
</script>