Vue.js火速上手第十九章——Fetch方法的get、POST请求

一、寻找json格式的API接口

http://jsonplaceholder.typicode.com/todos

二、在app.js中使用Fetch方法get接口中数据

new Vue({
    el: "#vue-app",
    data() {
        return {
            todos: [],
        };
    },
    mounted() {//页面渲染之前执行
        //fetch api请求接口
        fetch("http://jsonplaceholder.typicode.com/todos")
            .then(res => {
                return res.json();
            })
            .then(todos => {
                this.todos = todos;
            });
    },

 三、在index.html中遍历todos

 
Fetch请求
    

        

            

                
{{todo.title}}：{{todo.completed}}
            
        
        {{todos}}
    

四、get请求效果

五、 在html中添加表单

六、在app.js中添加Fetch方法的POST请求

    methods: {
        onSubmit() {
            //console.log(this.todo);
            fetch("http://jsonplaceholder.typicode.com/todos", {
                method: "POST",
                body: JSON.stringify(this.todo),
                headers: {
                    "Content-type": "application/json"
                }
            }).then(res => {
                return res.json();
            }).then(todo => {
                //console.log(todo);
                this.todos.unshift(todo);
            })
        },
    }

七、效果展示

       在表单中添加字段，提交表单后，遍历情况如图