赞
踩
一. 在utils文件夹内创建一个request.js 写以下封装的 wx.request()
方法
- const baseURL = 'https:// + '域名' '; //公用总路径地址
- export const request = (params) => { //暴露出去一个函数,并且接收一个外部传入的参数
-
- let dataObj = params.data || {}; //拿到传递进来的参数
- let headerObj = { //这里 可以添加一些请求头
- 'content-type': 'application/json'
- }
-
- return new Promise((resolve, reject) => { //通过 Promise 对 wx.request 方法进行异步处理。
- wx.request({
- url: baseURL + params.url, //通过默认的请求地址,再加上外部传入的 具体业务地址,组成一个完整的 请求地址。
- method: params.method || "GET", //外部 业务调用请求时,并传入 所需的请求方法,如果没有传递请求方法,则默认为 GET 请求
- data: dataObj, //这里的参数,来自于外部传入的参数
- header: headerObj,
- success: res => {
- if (res.statusCode === 200) {
- resolve(res); // 请求成功后,调用 Promise 的回调 resolve() 方法,将参数返回出去到 Promise 的实例对象身上。
- wx.showToast({
- title: "请求成功",
- icon: "success"
- })
- return;
- } else {
- wx.showToast({
- title: "请求失败",
- icon: "error"
- })
- reject(res); //同样请求失败后,向 Promise 实例返回出 错误的信息
- }
- },
- // fail: err => {
- // reject(err) //同样请求失败后,向 Promise 实例返回出 错误的信息
- // }
- })
- })
- }
二 . 在项目中,新建一个 API文件夹,用来做请求接口 模块化管理,这么做的原因是,虽然我们的请求接口封装了,但是整个项目中,调用接口的地方太多了,如果直接在各自页面中调用,也会显得代码十分的庸杂,所以不同的功能模块接口调用,为了避免混淆在一起,建议将api 请求接口 抽离出去,这样一来,页面的 js 部分就只着重于对发起请求前和请求响应后的数据逻辑处理。
api/index/js
- import { request } from "../utils/request"; //导入我们封装的请求方法。
-
- //首页请求接口
- export const index = (params) => { //接收页面调用传递过来的参数
- return request({ //调用请求方法
- url: "/api/science/index", //传入请求地址
- method: "GET", //传入请求方法
- data : params //这里的参数来自于页面调用时,传过来的参数
- })
- }
最后:在页面中,调用上述模块中相应的 api 接口,将参数依次传递过去,同时由于我们的请求方法是采用了 Promise
的方式封装的,所以在页面逻辑调用时,还可以 使用 async
和 await
的方式,将异步代码做同步化处理。
- // const { from } = require("form-data");
- import {index} from '../../api/index.js';
-
- // pages/demos/demos.js
- Page({
-
- /**
- * 页面的初始数据
- */
- data: {
-
- },
-
- async getdatas() {
- let parameter = {} //页面中,收集处理好,要传递的参数
- let data = await index(parameter);
- console.log(data);
- //data 身上就可以直接拿到,请求回来的数据。
- // if (data.statusCode === 200) {
- // wx.showToast({
- // title: "首页加载成功",
- // icon: "success"
- // })
- // }
- },
-
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad(options) {
- this.getdatas();
- },
-
-
- /**
- * 用户点击右上角分享
- */
- onShareAppMessage() {
-
- }
- })
原创作者:吴小糖
创作时间:2023.12.22
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。