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>