思路是首先是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 表单 文件
