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的转换方法

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     表单      文件