汕头市澄海区建设局网站短视频营销案例

一. 在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                //这里的参数来自于页面调用时，传过来的参数  })
}

三 . 必须配置服务器白域名 必须是https开头的

最后：在页面中，调用上述模块中相应的 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