色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue2.0 fetch

林玟書1年前7瀏覽0評論

Fetch是一款網絡請求API,它可以讓我們使用JavaScript發送HTTP請求,從而獲取服務器上的資源。在Vue 2.0中,fetch可以被Vue組件所使用,Vue組件可以使用fetch請求異步數據來渲染頁面。下面我們將介紹如何在Vue 2.0中使用fetch。

Vue 2.0中使用fetch的方法很簡單,你可以在組件中使用fetch請求數據,然后在組件中獲取到數據,最后將數據渲染到視圖中。在Ven中使用fetch需要先引入fetch()方法。

export default {
created() {
this.getData();
},
methods: {
async getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/comments');
const data = await response.json();
console.log(data);
}
}
}

上面是一個Vue組件的代碼,我們通過fetch方法可以向'https://jsonplaceholder.typicode.com/comments'這個API發送網絡請求,然后獲取到返回的數據,這里我們只是把數據打印到了控制臺中。值得注意的是,我們在getData()方法的前面使用了async關鍵字定義了一個異步函數,然后在fetch方法前面使用了await獲取fetch請求的結果。

還需要注意的是,我們發現以上代碼并沒有使用Vue官方提供的Vue-resource插件,而是直接使用了fetch。這是因為fetch更加簡潔,而且它是瀏覽器內置的。相反,Vue-resource是一個Vue.js的插件,它提供了一些能力:請求和響應攔截器,服務端渲染和重試等。但fetch更加輕量,比Vue-resource要簡單。

在fetch語法中,一般有兩種方式可以處理返回的promise。一種是使用.then()方法處理響應,然后把得到的數據傳遞給組件內的數據,另一種更加簡單的方式是使用async/await關鍵字,直接處理響應數據。使用async/await關鍵字不僅更加簡單,而且使用了它之后,在獲取響應數據之后可以直接進行組件數據的更新。

在Vue組件中,我們可以通過在created()和mounted()生命周期中請求數據,在數據請求結束之后就可以對組件的數據進行更新,從而渲染我們的頁面。這種方式比較簡單,而且不會使代碼變得臃腫。在進行修改的時候,也比較方便。

最后,需要注意的是,在使用fetch時可能會遇到一些跨域問題。這些問題可以通過設置代理服務器或者后端的CORS(Cross-Origin Resource Sharing)策略來處理。當然,如果你正在使用Vue-cli 3.0或者4.0等項目構建工具,需要在項目的配置文件中設置proxyTable配置項,以解決跨域問題。