1.network網絡相關配置(封裝axios,設置攔截響應和攔截請求)
- 通常開發項目爲了簡化我們的運維,和維護代碼,我們通常將網絡請求封裝起來。
- 在network裏面封裝好request請求
- 並且配置攔截以及baseURL和請求超時的限制。
//1.引入axios
import axios from 'axios'
//通過promise 封裝
export function request(config){
return new Promise((resolve, reject) => {
//1.創建axios的實例
const instance = axios.create({
baseURL:'http://109.23.21.32:8000',
timeout:5000
})
//2.axios的攔截器
//2.1請求攔截的作用
instance.interceptors.request.use(config => {
// console.log(config); //攔截下來的是這個請求的所有配置,發送成功但是被攔截了
return config //return 出去的話就可以拿到請求的數據了
},
err=>{
// console.log(err); //來到這裏的情況比較少
})
//2.2響應攔截的作用
instance.interceptors.response.use(result => {
return result.data
},
err => {
console.log(err);
})
//3.發送真正的請求
instance(config)
.then(res => {
resolve(res);
})
.catch(err => {
reject(err);
})
})
}
- 之後當我們home頁要請求某些數據的時候,在network下創建home.js直接引入request.
- 以函數的形式return出去我們封裝好的Promise對象,在home頁中調用函數請求數據.then保存數據,處理數據。
import {request} from "./request";
export function getHomeMultidata() {
return request({
url: '/home/multidata'
})
}
export function getHomeGoods(type, page) {
return request({
url: '/home/data',
params: {
type,
page
}
})
}
2.數據的請求和存儲,以及處理問題
- 根據上面我們拿到數據之後,然後需要保存數據,以及將數據處理成爲我們想要的形式。
- 在data中新增數據段,準備收我們請求的數據
data() {
return {
data: "",
iid: null,
res: null,
topImages: [],
goods: {},
shop: {},
detailInfo: {},
paramInfo: {},
commentInfo: {},
recommends: [],
themeTopYs: [],
currentIndex: 0,
isFixed: false
};
},
3.view頁面組件的目錄結構和使用的解析
- 舉個例子,當我們項目裏面有5個分頁的時候,就需要在views裏面創建相應的文件夾,而且每一個文件夾對應有一個childComps裏面放置僅屬於自己的組件。
- 這樣方便我們維護和管理代碼。
4.store頁面的目錄結構和文件抽離的解析
- store頁面也要將actions,getters,mutations等抽離出來,方便代碼的統一管理和維護。
下一篇:Vue重點學習經驗1
- 對於MVVM的理解
- Vue的生命週期
- 父子組件傳值