网络请求 Request

受小程序体量限制，数据需要搭建本地静态资源服务器保存或使用云存储
微信小程序使用 wx.request() 发起网络请求；还可以使用 Axios
请求方式很多，默认是 GET；使用较多的还有 POST
微信小程序支持回调函数 callback 和 Promise 两种方式
本地静态资源服务器使用，请访问静态资源服务器、动态资源服务器

常见配置项
item	desc
url	请求接口地址或数据
data	请求的参数多用于 POST，指的是提交数据也可以是 GET，用到 query 参数；也可以直接使用 ? 拼接在 url 后面
header	请求头；默认 content-type 为 application/json
method	请求方式：默认是 GET；还有 POST、DELETE、PUT、PATCH等
success	请求成功；通常还要根据结果进一步确认
fail	请求失败
complete	请求完成；无论成功失败都会执行通常用于日志

GET

获取大树小站积分榜数据

wx.request({
    url: 'https://glpla.github.io/utils/data/data2024/rank202402.json',
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

获取大树小站美食列表数据

wx.request({
    url: 'https://glpla.github.io/utils/data/goods.json',
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

分页获取数据，数据来自 node.js 服务器或 JSON-Server 服务器

. 使用 ? 和 & 直接拼接分页参数；注意不要拼错

wx.request({
    url: this.data.baseUrl + '/goods/page?page=' + this.page + '&pageSize=' + this.pageSize,
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

. 使用 data 配置项指定分页参数；可读性好，更直接

wx.request({
    url: this.data.baseUrl + '/goods/page',
    data: {
        page: this.page,
        pageSize: this.pageSize
    },
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

使用猫眼API获取信息并渲染到页面

wx.request({
    url:'https://m.maoyan.com/ajax/movieOnInfoList',
    success:(res:any)=>{
        console.log(res.data);
        this.setData({
            list:res.data.movieList
        })
    }
})

POST

数据提交到服务器；应显式的指定方式 method 和数据 data
案例：留言、问卷、注册

wx.request({
    url: 'http://127.0.0.1:3000/users',
    method:'POST',
    data:this.data.user,
    success: res => console.log(res),
    fail: err => console.log(err),
    complete: () => console.log('log done')
})

如果不确定数据的结构，可以在调试器控制台使用 log 输出 res，一层一层剥离数据，直到拿到需要的数据

请随时关注并确认网络 API 接口的变化

跨域问题只存在于使用浏览器的 WEB 开发中。小程序的宿主环境是微信客户端，不是浏览器，不存在跨域的问题

[] 自建动态资源服务器的使用

注意比较几种数据请求的特点

这里使用 https；开发阶段，小程序会警告，无需理会

获取所有数据

wx.request({
  url: 'http://127.0.0.1:3000/coffee',
  success: res => {
    console.log(res);
  },
  fail: err => console.log(err),
  complete: () => console.log('done')
})

根据 id 获取数据

wx.request({
  url: 'http://127.0.0.1:3000/coffee?id=9',
  success: res => {
    console.log(res);
  },
  fail: err => console.log(err),
  complete: () => console.log('done')
})

分页获取 - 指定页数和大小；页数从1开始

wx.request({
  url: 'http://127.0.0.1:3000/coffee/page?page=2&pageSize=2',
  success: res => {
    console.log(res);
  },
  fail: err => console.log(err),
  complete: () => console.log('done')
})

服务器 API 接口实现 - 根据是否携带查询参数 Query Parameter 判断如何返回数据

router.get("/", (req, res) => {
  const id = req.query.id;
  if (id) {
    console.log("get by id");
    res.json({
      err: 0,
      data: coffee.find((item) => item.id == id),
    });
  } else {
    console.log("get all");
    res.json({
      err: 0,
      data: coffee,
    });
  }
});

router.get("/page", (req, res) => {
  let arr = [...coffee];
  let start = (req.query.page - 1) * req.query.pageSize;
  let result = arr.splice(start, req.query.pageSize);
  res.setHeader("X-Total-Count", coffee.length);
  res.json({
    errno: 0,
    msg: "get goods by page ok",
    data: result,
  });
});

如果指定 page=0，则范围会出现负值[-2,2]，从数据最后面开始截取2条数据

网络请求

开发要求

接口配置

Request

GET

POST