在Vue中使用fetch的方法很簡單。fetch方法是JS中的一個內置方法,它有許多不同的用途。當我們使用Vue的時候,可以使用fetch來發送請求獲取數據。
下面是一個使用fetch獲取數據的例子:
fetch('https://jsonplaceholder.typicode.com/posts') .then(response =>response.json()) .then(data =>console.log(data)) .catch(err =>console.error(err));
如上述代碼,fetch方法返回的是一個Promise對象。我們可以在then方法鏈中使用response.json()方法來獲取JSON格式的數據,并將其轉換為JavaScript對象。
在Vue中,我們可以將fetch請求封裝成一個方法,以便于重復使用。下面是一個Vue組件示例,它使用了fetch方法向API發送請求,并將API返回的數據存儲到組件的data屬性中:
<template> <div> <ul> <li v-for="post in posts" :key="post.id"> {{ post.title }} </li> </ul> </div> </template> <script> export default { name: 'PostsList', data() { return { posts: [] } }, created() { this.getPosts(); }, methods: { getPosts() { fetch('https://jsonplaceholder.typicode.com/posts') .then(response =>response.json()) .then(data =>{ this.posts = data; }) .catch(err =>console.error(err)); } } } </script>
在上述代碼中,我們使用Vue的created鉤子函數來調用getPosts()方法。getPosts()方法發送一個fetch請求,獲取api返回的數據并賦值給組件的data屬性,從而實現用Vue渲染列表的功能。
上一篇css 顏色自適應