? ? ? ? 上一章節(jié)我已經(jīng)介紹了如何在vue-cli3腳手架中模擬本地數(shù)據(jù)竿报，但在實際開發(fā)中我們不僅要能夠本地模擬數(shù)據(jù)琅豆，而且也要合理的管理我們的請求的API衡载，這樣有利于今后的查看以及更改坊谁。所以我們通常會把向后臺請求的接口封裝起來费彼，統(tǒng)一管理所有的API接口，那么基于上篇文章《vue-cli3本地模擬數(shù)據(jù)（一）》口芍，本章我來介紹如何封裝接口請求箍铲，如何統(tǒng)一管理接口。
1鬓椭、項目結構更改颠猴，在原來的的目錄下，我們在src目錄下新增一個api文件夾小染，里邊放兩個js文件翘瓮，一個叫做fetch.js，另一個叫做apis.js裤翩。截圖如下：
2资盅、那么我們來看看這兩個文件里邊都有什么，這也是本章的重要部分
2.1岛都、fetch.js文件內容律姨，我們采用的是Promise來異步封裝數(shù)據(jù)，這里過濾的比較干凈臼疫，通過resolve最終返回的數(shù)據(jù)都是直接可以無需再判斷的择份，因為我們過濾了兩次status==‘200’，第一次過濾瀏覽器請求是否成功烫堤，第二次確保后來處理完畢的數(shù)據(jù)是否準確無誤的荣赶，截圖如下：
2.2、apis.js這個文件就是統(tǒng)一管理所有接口請求方法的鸽斟，非常簡單拔创，此處只創(chuàng)建了一個，后邊所有的接口請求都可以放在apis.js中
2.3富蓄、在vue文件中調用該方法：我們打開HelloWorld.vue文件剩燥，看看具體是如何調用的，分兩步：第一步：引用，第二步：調用
2.4灭红、最終界面展示結果截圖
好啦侣滩，今天的內容就分享到這里，希望能夠對您有所幫助变擒，建議在看次文章之前君珠，請先閱讀上一篇：《vue-cli3本地模擬數(shù)據(jù)（一）》
