12.9問題

• 解構賦值
  解構賦值語法是一種 Javascript 表達式。通過解構賦值, 可以將屬性/值從對象/數組中取出,賦值給其他變量。

應用場景：當請求一個接口，服務器返回數據，可以利用結構賦值來爲data賦值爲res，解構對象，重命名

代碼：const { data: res } = await this.$http.post(“login”, this.loginForm);

• await,async解決了什麼問題，和promise又有什麼關係

應用場景：利用axios請求接口，會用到post,delete,put,get，方法，而這些方法會返回一個promise對象，然後可以調用then來執行成功的回調函數，還要再重新賦值。但是使用await，async關鍵字，可以直接獲取到請求成功的數據

代碼

 this.$refs.loginFormRefs.validate(async valid => {
        console.log(valid);
        if (!valid) return;
        const { data: res } = await this.$http.post("login", this.loginForm);
        console.log(res);
        if (res.meta.status != 200) return this.$message.error("登錄失敗");
        this.$message.success("登錄成功");

這裏你可能會好奇，說是axios發起請求，爲什麼沒有見axios，而且接口就一個字段，都沒有網址?
因爲在全局，設置了axios的請求跟路徑，並且將axios掛載到了vue原型上

// 導入axios
import axios from 'axios'
// 設置請求根路徑
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    // 設置請求攔截器，來爲請求添加token
    // 需要授權的API， 必須在請求頭中， 使用Authorization字段，提供token令牌==>權限認證
axios.interceptors.request.use(config => {
        console.log(config);
        // 爲請求頭對象， 添加token驗證的Authorization
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config
    })
    // 將axios掛載到Vue的原型上，這樣全局每一個vue組件就可以通過this.$http來調用axiox
Vue.prototype.$http = axios

• created 和mounted
  created：在模板渲染成html前調用，通常初始化某些屬性值，然後再渲染成試圖
  mounted：在模板渲染成html後調用，通常是初始化html頁面後，再對html節點進行的操作
• 請求攔截器和響應攔截器
  請求攔截器

 // 設置請求攔截器，來爲請求添加token
    // 需要授權的API， 必須在請求頭中， 使用Authorization字段，提供token令牌==>權限認證
axios.interceptors.request.use(config => {
        console.log(config);
        // 爲請求頭對象， 添加token驗證的Authorization
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config
    })