网络请求

发起 HTTPS 网络请求，从后端获取数据，显示在页面之上

基本使用

通过wx.request请求数据

Page({
  onLoad(options) {
    wx.request({
      url: "https://iwenwiki.com/api/blueberrypai/getChengpinDetails.php",
      success(res) {
        console.log(res.data);
      },
    });
  },
});

注意

在小程序中使用网络相关的 API 时，需要注意下列问题，请开发者提前了解

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信（生产环境）
通过开发者工具配置：“不效验合法域名” （开发环境）

常用参数

我们了解了基本的网络请求之后，在考虑在网络请求中的属性如何使用。例如：如何传递参数？

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
timeout	number		否	超时时间，单位为毫秒。默认值为 60000
method	string	GET	否	HTTP 请求方法 常用的方式 GET 和 POST
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

Page({
  data: {
    chengpinDetails: [],
  },
  onLoad() {
    wx.request({
      url: "http://iwenwiki.com:3002/api/foods/list",
      method: "GET",
      data: {
        city: "北京",
      },
      header: {
        "content-type": "application/json",
      },
      timeout: 5000,
      success(res) {
        console.log(res.data);
      },
      fail(error) {
        console.log(error);
      },
      complete() {
        console.log("网络请求完成");
      },
    });
  },
});

封装网络请求

新建 /api/request.ts 文件

function request(url: any, method: any, data: any) {
  wx.showLoading({
    title: "加载中...",
    mask: true,
  });
  const promise = new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      success(res) {
        resolve(res);
      },
      fail(err) {
        reject(err);
      },
      complete() {
        wx.hideLoading();
      },
    });
  });

  return promise;
}

module.exports = {
  request,
};
export {};

新建 /api/index.ts 文件

const { request } = require("./request");
const base = {
  baseUrl: "http://iwenwiki.com:3002",
  getList: "/api/foods/list", // 获取列表接口
  toLogin: "/api/user/login", // 登录接口
};

function getList(data: any) {
  return request(base.baseUrl + base.getList, "GET", data);
}
function toLogin(data: any) {
  return request(base.baseUrl + base.toLogin, "POST", data);
}

module.exports = {
  getList,
  toLogin,
};
export {};

使用

const { getList } = require("../../api/index");
Page({
  data: {
    chengpinDetails: [],
  },
  onLoad() {
    getList({ city: "北京" }).then((res: any) => {
      console.log(res.data);
    });
  },
});