HTTP请求封装

相关信息

• 以下方法基于 axios 进行封装，旨在每个项目引入wgwebbridge.js即可通过以下接口快速发送 http 请求
• 基于 axios 封装，那么 api 接受所有 axios 接受的参数，axios 参数文档为：https://axios-http.com/zh/docs/req_config

mlol.requestApi.get(options)

提示

发送 Get 请求

传参

options 支持 axios 的 get 所有参数，即您只需要将您需要的 axios 所有的参数都放入 options 内，此 api 内部会对参数进行拆分放入 axios 指定的位置,以下只列出必须参数

参数	类型	描述
url	String	发送数据的路径

示例

发送 get

<template>
  <script src="https://mlol-file.qpic.cn/mobile/mlol/js/mlol.js"></script>
  <div class="container">
    <button class="button" @click="getHttp">发送get</button>
  </div>
</template>

<script>
export default {
  setup() {
    async function getHttp() {
      const res = await mlol.requestApi.get({
        url: "https://mlol.qt.qq.com/go/battle_info/get_guofu_data",
      });
      if (res) {
        alert("请求成功，请到控制台查看");
        console.log("getHttp==", res);
      }
    }

    return {
      getHttp,
    };
  },
};
</script>

<style>
.container {
  text-align: center;
}
.button:active {
  border: 1px solid #409eff;
}

.button {
  border: 1px solid #dcdfe6;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>

mlol.requestApi.post(options)

提示

发送 Post 请求

传参

options 支持 axios 的 get 所有参数，即您只需要将您需要的 axios 所有的参数都放入 options 内，此 api 内部会对参数进行拆分放入 axios 指定的位置,以下只列出必须参数

参数	类型	描述
url	String	发送数据的路径
data	Object	要携带的数据

示例

发送请求 post

<template>
  <script src="https://mlol-file.qpic.cn/mobile/mlol/js/mlol.js"></script>
  <div class="container">
    <button class="button" @click="postHttp">发送请求post</button>
  </div>
</template>

<script>
export default {
  setup() {
    async function postHttp() {
      const res = await mlol.requestApi.post({
        url: "https://mlol.qt.qq.com/go/pgc/author/biz/list",
        data: {
          name: "zs",
        },
        headers: {
          "content-type": "multipart/form-data;",
        },
      });
      if (res) {
        alert("请求成功，请到控制台查看");
        console.log("getHttp==", res);
      }
    }

    return {
      postHttp,
    };
  },
};
</script>

<style>
.container {
  text-align: center;
}
.button:active {
  border: 1px solid #409eff;
}

.button {
  border: 1px solid #dcdfe6;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>

自定义 HttpRequest

前面的 1，2 点是本 js 内置好的，主要目的是让接入者快速发送请求，若上面的例子不符您的开发需求，不妨选择以下自定义模式来构建符合自己当前业务需求的 HttpRequset，分为单例模式、多例模式

注意

• 单例在初始化完的 ceateAxiosInstance 方法之后，axios 实例创建完就会进行闭包缓存，再次调用 ceateAxiosInstance 则返回上一次的实例，而多例每一次都是创建一个新的 axios 实例
• 单例适合在请求都不复杂请求下做统一适配下使用，例如对多个请求进行统一的拦截器；而多例适合在复杂情况下做适配，例如需要对不同请求进行不同的拦截器适配

mlol.initHttpInstance(defaultOptions) 多例模式

创建一个 axios 实例，需要两个步骤

const ceateAxiosInstance = mlol.initHttpInstance(defaultOptions);
const axiosInstance = ceateAxiosInstance(options);
// 发送请求：axiosInstance(httpOptions)

传参

参数名	类型	描述
defaultOptions	Object	此参数将用于 axios 创建时的默认参数，在这里您可以设置拦截器，baseURL，timeout 等默认参数
options	Object	此参数一般不传，但若您在某个请求时候需要修改 defaultOptions 的默认值即可在 options 进行传入
httpOptions	Object	此参数就是您需要发送请求携带的请求参数,遵循 axios 的请求参数传递，官网地址:https://axios-http.com/zh/docs/req_config

示例

自定义请求实例

<template>
  <script src="https://mlol-file.qpic.cn/mobile/mlol/js/mlol.js"></script>
  <div class="container">
    <button class="button" @click="createIstanceToHttp">
      多例：自己创建实例发请求
    </button>
  </div>
</template>

<script>
export default {
  setup() {
    async function createIstanceToHttp() {
      const ceateAxiosInstance = mlol.initHttpInstance({
        baseURL: "https://mlol.qt.qq.com",
      });
      const axiosInstance = ceateAxiosInstance();
      const res = await axiosInstance({
        method: "get",
        url: "/go/battle_info/get_guofu_data",
      });
      if (res) {
        alert("请求成功，请到控制台查看");
        console.log(res);
      }
    }

    return {
      createIstanceToHttp,
    };
  },
};
</script>

<style>
.container {
  text-align: center;
}
.button:active {
  border: 1px solid #409eff;
}

.button {
  border: 1px solid #dcdfe6;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>

mlol.initgHttpInstance(defaultOptions) 单例模式

创建一个 axios 实例，需要两个步骤

const ceateAxiosInstance = mlol.initgHttpInstance(defaultOptions);
const axiosInstance = ceateAxiosInstance();
// 发送请求：axiosInstance(httpOptions)

传参

参数名	类型	描述
defaultOptions	Object	此参数将用于 axios 创建时的默认参数，在这里您可以设置拦截器，baseURL，timeout 等默认参数
httpOptions	Object	此参数就是您需要发送请求携带的请求参数,遵循 axios 的请求参数传递，官网地址:https://axios-http.com/zh/docs/req_config

示例

自定义请求实例

<template>
  <script src="https://mlol-file.qpic.cn/mobile/mlol/js/mlol.js"></script>
  <div class="container">
    <button class="button" @click="createIstancegToHttp">
      单例：自己创建实例发请求
    </button>
  </div>
</template>

<script>
export default {
  setup() {
    async function createIstancegToHttp() {
      const ceateAxiosInstance = mlol.initgHttpInstance({
        baseURL: "https://mlol.qt.qq.com",
      });
      const axiosInstance = ceateAxiosInstance();
      const res = await axiosInstance({
        method: "get",
        url: "/go/battle_info/get_guofu_data",
      });
      if (res) {
        alert("请求成功，请到控制台查看");
        console.log("instanceg==", res);
      }
    }

    return {
      createIstancegToHttp,
    };
  },
};
</script>

<style>
.container {
  text-align: center;
}
.button:active {
  border: 1px solid #409eff;
}

.button {
  border: 1px solid #dcdfe6;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
</style>