uniapp 微信小程序请求规范

思路是首先是main.js需要将请求接口全部放在vuex里面

// 初始API配置

initApi(store);

复制代码

export const initApi = (store) => {
  for (let i = 0; i < API.length; i++) {
    let item = API[i];

    // 用item.name名作为作为调用方法
    /*
			return response Promise
		*/
    // 设置请求前缀名
    item.url = `${config.prefix}${item.url}`;
    https[item.name] = (param = {}, config = {}) => {
      // 赋值客户端类型 默认 cloud
      config.headersConfig = {
        "client-type": item.clientType || "app",
      };

      return setMethods(item, param, config);
    };
  }

  // console.log(https)
  // 请求 注入vuex
  store.commit("setHttps", https);

  // 设置请求响应
  request(instance);
  response(instance);
};

export default createStore({
  state: {
    // 请求接口配置项
    https: {},

    // 网页固定跳转地址
    webUrls: {
      // 关于我们
      aboutUs: "aboutUs.html",
      // 隐私协议
      privacyAgreement: "privacyAgreement.html",
      // 服务协议
      serviceAgreement: "serviceAgreement.html",
    },
  },
  mutations: {
    // 设置请求函数
    setHttps(state, res) {
      state.https = res;
    },
  },
  actions: {},
  getters: {
    getHttps: (state) => state.https,
    getUserInfo: (state) => state.userInfo,
    getWebUrls: (state) => state.webUrls,
  },
  modules: {
    mainModules,
    mineModules,
    evaluateModules,
    elderlyModules,
    deviceModules : createModules( deviceApi ),
    homeModules : createModules(homeApi),
    serviceModules : createModules( serviceApi ),
    nswhModules
  },
});

// 请求注入vuex

store.commit("setHttps", https);

告诉 Vuex：调用 setHttps 这个修改方法，把 https 放进 Vuex 的 state 里

就是触发mutations

setHttps(state, res) {

state.https = res;

}
复制代码
import mainApi from "./mainApi";
import mineApi from "./mineApi";


export default [
  ...mainApi,
  ...mineApi,
];
可以写在index里面把其他的导入进来
复制代码
https = {
  getDeviceList: function(param, config) {
    config.headersConfig = {
      "client-type": "app"
    };

    return setMethods(...);
  },

  getDeviceDetail: function(param, config) {
    config.headersConfig = {
      "client-type": "app"
    };

    return setMethods(...);
  },

  login: function(param, config) {
    config.headersConfig = {
      "client-type": "app"
    };

    return setMethods(...);
  }
}
config.headersConfig = {

"client-type": item.clientType || "app",

};加上请求头说明app
判断是文件、表单、还是json格式设置不同的请求头
复制代码
  if (isFile) {
    //文件
    Object.assign(config.headers, {
      "content-type": "multipart/form-data",
    });
  } else {
    if (isFormData) {
      Object.assign(config.headers, {
        "content-type": "application/x-www-form-urlencoded",
      });
    } else {
      Object.assign(config.headers, {
        "content-type": "application/json",
      });
    }
  }
还有就是要根据的直接在路由上拼接或者是query或者是body,(表单、json、上传文件)

一次接口请求

│

├── ① 参数直接拼到 URL 路径

│ 例如：/user/100

│

├── ② 参数放到 Query

│ 例如：/user?id=100

│

└── ③ 参数放到 Body

│

├── JSON

│ {"id":100}

│

├── 表单

│ id=100&name=张三

│

└── 文件上传

文件 + 其他字段
query的转换方法
javascript 复制代码
export const paramToStr = (data) => {
  if (!data) {
    return "";
  }

  return Object.keys(data)
    .map((item) => `${item}=${data[item]}`)
    .join("&");
};
body表单body转换

npm install qs

qs.stringify(param)

data: qs.stringify(param)
后端要求某个"固定参数"必须放 URL 上，但其他业务参数放 Body。

url: url + (queryAfterString ? `?${queryAfterString}` : ""),
import { UniAdapter } from "uniapp-axios-adapter";

uniapp-axios-adapter

↓

一个第三方 npm 包

UniAdapter

↓

这个包提供的一个适配器

"别直接按照默认方式发请求，改用 UniApp 的请求方式来发。"

uniapp也就直接可以使用axios不用request
main.js

↓

initApi(store)

↓

读取 API 接口配置数组

↓

把每个接口生成成函数

↓

https = {

xxx() {},

xxx() {},

xxx() {}

}

↓

store.commit("setHttps", https)

↓

Vuex state.https

↓

页面可以拿到 API

↓

setMethods()

↓

┌─────────────┼─────────────┐

↓ ↓ ↓

Path Query Body

/user/100 ?id=100 ↓

┌────────┼────────┐

↓ ↓ ↓

JSON 表单文件