将网络请求抽离成单独js

 pageLifetimes: {
            show() {
          
                this.getGoodsList(true);
                
            },
        },  
-----------------------------------------------------------

  // 分页查询商品列表
             getGoodsList(isInit = false) {
                let { params, goodsList } = this.data;
                if (isInit) {
                    params.pageNo = 1;
                }
                this.setData({
                    loading: true,
                });
                let apiName = params.keywords ? "esSearchGoodsPage" : "pageGoodByExample";
                console.log('apiName',apiName)
                bccGoodsService[apiName](params)
                    .then(({ result }) => {
                        let { list } = result;
                        list = list.map((item) => {
                            return {
                                values: this.handleDataFormat(item),
                                ...item,
                            };
                        });
                        const oldList = isInit ? [] : goodsList;
                        this.setData({
                            goodsList: [...oldList, ...list],
                           
                        });
                        console.log("3:组件加载数据,",this.data.goodsList)
                    })
                    .finally(() => {
                        this.setData({
                            loading: false,
                        });
                    });
            },

上面是一个分页查询商品的请求，并把数据放到了goodsList中，配合前端展示，实现了页面一加载就调用该方法，并且显示到页面上。

 可以看到请求数据就是第一页，显示10个，我们将会看到10条数据过来

 

 

import { ApiService } from "../index";
import { product } from "../config";
class BccGoodsService extends ApiService {
    // 首页
    pageGoodByExample(params) {
        return this.$postJson("pageGoodByExample", params);
    }
    // 搜索
    esSearchGoodsPage(params) {
        return this.$postJson("esSearchGoodsPage", params);
    }
    // 详情
    findGoodsDTOById(params) {
        return this.$get("findGoodsDTOById", params);
    }
    // 更新
    updateGoodsDTO(params) {
        return this.$postJson("updateGoodsDTO", params);
    }
    // 手动上架
    insertGoodsDTO(params) {
        return this.$postJson("insertGoodsDTO", params);
    }
    // 添加商品
    syncGoodsDTOWsxcWatchHead(params) {
        return this.$postJson("syncGoodsDTOWsxcWatchHead", params);
    }
    // 计算总成本
    getBccGoodsPriceTotal(params) {
        return this.$postJson("getBccGoodsPriceTotal", params);
    }
}
export default new BccGoodsService(product, "bccGoods");

---------------------------
../config   config.js
export const product = "product-web";

import { merge, paramsFilter } from "../utils/helper";
import Toast from "../utils/toast.js";
import session from "../utils/session.js";
import { SERVER_BASE_URL } from "../config/index.js";

const DEFAULT_OPTIONS = {
    header: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        Accept: "application/json",
    },
    // 默认会在接口出错时弹出Toast，如果有特定请求不需要展示Toast，可以在options中传入toastError: false
    toastError: true,
};

const authCodeMessage = {
    4001: "Token为空，请重新登录",
    4002: "Token无效，请重新登录",
    1415: "登录过期，请重新登录",
};

const codeMessage = {
    500: "服务器发生错误，请检查服务器。",
    502: "网关错误。",
    503: "服务不可用，服务器暂时过载或维护。",
    504: "网关超时。",
    ...authCodeMessage,
};

function showErrorMsgByResponse(data) {
    Toast.simple(codeMessage[data.code] || data.message);
}

let isTokenRefreshing = false;

let queue = [];

function refreshToken() {
    const accessInfo = session.get("accessInfo");
    const { refresh_token } = accessInfo;
    return request("/auth-web/auth/refreshToken", { refreshToken: refresh_token }, { method: "POST" })
        .then((res) => {
            // 更新认证信息
            const accessInfo = res.result;
            session.setSync("accessInfo", accessInfo);
            return accessInfo;
        })
        .then((accessInfo) => {
            // 执行队列中的请求
            queue.forEach((cb) => {
                cb(accessInfo);
            });
        })
        .finally(() => {
            isTokenRefreshing = false;
            // 清空队列
            queue = [];
        });
}

function request(url, data, options = {}) {
    return new Promise((resolve, reject) => {
        const mergedOptions = merge(DEFAULT_OPTIONS, options);
        const accessInfo = session.get("accessInfo");
        if (accessInfo) {
            const { token_type, access_token } = accessInfo;
            // 添加headers
            mergedOptions.header.Authorization = `${token_type} ${access_token}`;
        }
        const handledParams = paramsFilter(data, options.method === "GET");
        // eslint-disable-next-line no-console
        console.log(`${options.method}接口：${SERVER_BASE_URL + url}, 参数：${JSON.stringify(handledParams)}`);
        wx.request({
            url: SERVER_BASE_URL + url,
            data: handledParams,
            timeout: 30000,
            ...mergedOptions,
            success: function (res) {
                if (res.data.success) {
                    resolve(res.data);
                } else {
                    console.error(res);
                    // inner code handler
                    switch (res.data.code) {
                        // 需要重新登录
                        case 4001:
                        case 4002:
                        case 1415:
                            showErrorMsgByResponse(res.data);
                            wx.redirectTo({
                                url: "/pages/login/index",
                            });
                            reject(res);
                            break;
                        case 4003:
                            // 刷新token
                            if (!isTokenRefreshing) {
                                isTokenRefreshing = true;
                                refreshToken().then(() => {
                                    // 再次请求
                                    resolve(request(url, data, options));
                                });
                            } else {
                                const trigger = function () {
                                    resolve(request(url, data, options));
                                };
                                queue.push(trigger);
                            }
                            break;
                        default:
                            if (mergedOptions.toastError) {
                                showErrorMsgByResponse(res.data);
                            }
                            reject(res);
                            break;
                    }
                }
            },
            fail: function (res) {
                Toast.simple("服务异常");
                console.error(res);
                reject(res);
            },
        });
    });
}

export class ApiService {
    constructor(context, feature) {
        this.context = context; // 上下文
        this.feature = feature; // 特性
    }

    // get请求
    $get(action, data, options = {}) {
        return request(`/${this.context}/${this.feature}/${action}`, data, { ...options, method: "GET" });
    }

    // delete请求
    $del(action, data, options = {}) {
        return request(`/${this.context}/${this.feature}/${action}`, data, { ...options, method: "DELETE" });
    }

    // post请求
    $post(action, data, options = {}) {
        return request(`/${this.context}/${this.feature}/${action}`, data, { ...options, method: "POST" });
    }

    // post application/json请求
    $postJson(action, data, options = {}) {
        const defaultOptionsForPostJson = {
            header: {
                "Content-Type": "application/json",
            },
        };
        return request(`/${this.context}/${this.feature}/${action}`, data, { ...defaultOptionsForPostJson, ...options, method: "POST" });
    }

    // put请求
    $put(action, data, options = {}) {
        return request(`/${this.context}/${this.feature}/${action}`, data, { ...options, method: "PUT" });
    }

    // put application/json请求
    $putJson(action, data, options = {}) {
        const defaultOptionsForPostJson = {
            header: {
                "Content-Type": "application/json",
            },
        };
        return request(`/${this.context}/${this.feature}/${action}`, data, { ...defaultOptionsForPostJson, ...options, method: "PUT" });
    }
}