---
# System prepended metadata

title: 異步數據(複習篇)

---

# 異步數據(複習篇)
#### 封裝ajax:
    promise + axios 請求函數
    封裝每個接口對應的巧求函數(能根據街口定義ajax請求函數)
    解決跨域問題: 配置代理，對代理的理解
    代理:攔截請求原先的端口號，轉發至你設定的端口號 
    
    瀏覽器:
    不知道代理的存在 
    對應的是當前，前台提交的請求 
    根本不知道服務器得存在
    服務器應用(後):port 4000
    前台應用:port 8080
    我的應用是應用在某個服務器上的
---
#### vuex編碼:
| 創建所有相關模塊 |||  |||
| -------- | -------- | -------- | -------- | -------- | -------- |
store/index |state|muations| actions|getters| mutation-type|

| 設計state :  |
| -------- | 
|從後台獲取數據|

| 實現actions:  |
| -------- | -------- |
|定義異步action: async/await |
|流程:發ajax獲取數據，commit給mutation |

| 實現muations： |
| -------- | 
|給state賦予值|

| index： |
| -------- | 
|創建store對象|

| main.js： |
| -------- | 
|配置store|

#### 1. vuex　組件異步顯示數據
 在mouted(),通過＄store.dispatch('actionNAME')來異步獲取後台數據到state中mapState(['XXX'])讀取state中的數據到組件中在模塊數據中顯示數據
#### 2. vuex　模塊中顯示數據的來源
* data:自身的數據（內部改變）
* props: 外部傳入的數據（外部改變）
* computed:　根據data／props／別的compute/state/getters
#### 3.異步顯示輪播
* 通過vuex獲取foodCategorys數組(發請求,讀取)
* 對數據進行整合計算(一維變為特地的二維數組)
* 使用Swiper顯示輪播，如何在介面更新之後創建Swiper對象?
 >> 1.  使用回調+$nextick()
 >> 2.  使用watch+$nextick() [watch後會或取數據]
 
#### 4.前後台交互相關問題
* 如何查看你的應用是否宋某個ajax請求?
    瀏覽器的network
* 發ajax請求4040
  請求路徑的對
  代理是否生效(配置和重啟)
  服務器應用是否運行
* 後台返回了數據，頁面沒有顯示?
  vuex中是否有
  組件中是否讀取