Vue之优化封装请求方法

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,
    })
}

最终代码展示