axios

1、先创建一个 services 文件夹，创建 request.js 文件;

一、创建文件 request.js

*    request.js

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
  // 初始化请求配置
  uni.$u.http.setConfig((config) => {
    /* config 为默认全局配置*/
    //域名前缀

    //#ifdef H5
    config.baseURL = "/api";
    //#endif

    //#ifdef MP-WEIXIN || APP-PLUS
    config.baseURL = "http://tp6.lyqing.cn/api";
    //#endif

    //请求头
    config.header = {
      "X-Requested-With": "XMLHttpRequest",
    };

    return config;
  });

  // 请求拦截
  uni.$u.http.interceptors.request.use(
    (config) => {
      // 可使用async await 做异步操作
      // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
      config.data = config.data || {};
      // 根据custom参数中配置的是否需要token，添加对应的请求头
      // if(config?.custom?.auth) {
      //     // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
      //     config.header.token = vm.$store.state.userInfo.token
      // }
      return config;
    },
    (config) => {
      // 可使用async await 做异步操作
      return Promise.reject(config);
    }
  );

  // 响应拦截
  uni.$u.http.interceptors.response.use(
    (response) => {
      /* 对响应成功做点什么 可使用async await 做异步操作*/
      const data = response.data;

      // 自定义参数
      // const custom = response.config?.custom
      // if (data.code !== 200) {
      //     // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
      //     if (custom.toast !== false) {
      //         uni.$u.toast(data.message)
      //     }

      //     // 如果需要catch返回，则进行reject
      //     if (custom?.catch) {
      //         return Promise.reject(data)
      //     } else {
      //         // 否则返回一个pending中的promise，请求不会进入catch中
      //         return new Promise(() => { })
      //     }
      // }
      return data === undefined ? {} : data;
    },
    (response) => {
      // 对响应错误做点什么 （statusCode !== 200）
      return Promise.reject(response);
    }
  );
};

二、总入口文件夹 api，创建 index.js 文件

*    index.js

//默认引入模块
const files = require.context("./", true, /index.js$/);
const modules = {};

files.keys().forEach((key) => {
  if (key === "./index.js") return;

  const item = files(key).default;

  var mod = {};

  //替换路径
  var name = key.replace(/\.\/(.*)\/index.js/, "$1");

  mod[name] = item;

  Object.assign(modules, mod);
});

const install = (Vue, vm) => {
  //加载模块
  modules;

  //循环组合接口API
  let api = {};

  for (let ModeName in modules) {
    if (JSON.stringify(modules[ModeName]) == "{}") {
      continue;
    }

    for (let ApiName in modules[ModeName]) {
      let config = modules[ModeName][ApiName];
      config.name = ApiName;

      if (!config.name || !config.url) {
        continue;
      }

      if (!api[ModeName]) {
        api[ModeName] = {};
      }

      switch (config.method.toUpperCase()) {
        case "GET":
          api[ModeName][config.name] = (data = {}) => {
            return uni.$u.http.get(config.url, { params: data });
          };
          break;
        case "POST":
          api[ModeName][config.name] = (data = {}) => {
            return uni.$u.http.post(config.url, data);
          };
          break;
        case "UPLOAD":
          api[ModeName][config.name] = (data = {}) => {
            if (data.filePath) {
              return uni.$u.http.upload(config.url, data);
            } else {
              return uni.$u.http.post(config.url, data);
            }
          };
          break;
      }
    }
  }

  vm.$u.api = api;
};

export default {
  install,
};

三、每个独立接口模块下面的 index.js

*    src/api/user/index.js

const files = require.context(".", false, /\.js$/);
const list = {};

files.keys().forEach((key) => {
  if (key === "./index.js") return;
  const item = files(key).default;
  Object.assign(list, item);
});

export default list;

四、其他的接口文件

*    src/api/user/base.js

export default {
  login: {
    url: "user/auth/login",
    method: "POST",
  },
  bind: {
    url: "user/auth/bind",
    method: "POST",
  },
  profile: {
    url: "user/auth/profile",
    method: "UPLOAD",
  },
};

五、在 main.js 里面引入

// 引入请求封装，将app参数传递到配置中
require("services/request.js")(app);

//引入接口
import api from "@/api/index.js";
Vue.use(api, app);

六、H5 页面配置处理跨域问题

*    vue.config.js

module.exports = {
  transpileDependencies: ["uview-ui"],
  // 以下为接口代理设
  devServer: {
    proxy: {
      "/stock": {
        // target: 'http://www.fastpro.com', // 本地
        target: "https://thinkphpfastpros.lyqing.cn", // 线上
        // 如果接口跨域，需要进行这个参数配置
        changeOrigin: true,
        pathRewrite: {
          "^stock": "",
        },
      },
    },
  },
};

七、页面调用

<script>
        async addressInex(){
      let result = await this.$u.api.user.bind(this.bind)
      if(result.code == 1)
      {
          uni.setStorageSync('LoginUser', result.data);
          this.$refs.uToast.show({
              type: 'success',
              message: result.msg
          })
          uni.switchTab({
              url: '/pages/user/index'
          });
      } else {
          this.$refs.uToast.show({
              type: 'error',
              message: result.msg
          })
      }

  }
</script>