Vue之優化封裝請求方法

對於代碼中的請求操作

1、接口請求可能需要重用

2、實際工作中，接口非常容易變動, 改起來很麻煩！

我們建議的做法是把所有的請求都封裝成函數然后統一的>###組織到模塊中進行管理

這樣做的好處就是:管理維護更方便,也好重用

封裝請求本身！

    loginIn() {
      // 對於代碼中的請求操作
      // 1、接口請求可能需要重用
      // 2、實際工作中，接口非常容易變動, 改起來很麻煩！
      // 我們建議的做法是把所有的請求都封裝成函數然后統一的組織到模塊中進行管理
      // 這樣做的好處就是:管理維護更方便,也好重用
      // 封裝請求本身！
      request({
        method: "POST",
        url: "/mp/v1_0/authorizations",
        //  data用來設置 POST 請求體
        data: this.user,
      })
        .then((res) => {
          //   登錄成功
          console.log(res);
        })
        .catch((err) => {
          //   登錄失敗
          console.log("登錄失敗", err);
        });
    },

封裝后的代碼！

//  用戶登錄
export const onLogin = (data) => {
    return request({
        method: "POST",
        url: "/mp/v1_0/authorizations",
        //  data用來設置 POST 請求體
        // 在ES6中屬性名和屬性值同名的時候只用寫一個就就可以了！
        data,
    })
}

最終代碼展示