网络请求

@Request
开发要求
- 仅支持https请求
- 必须将接口域名(不是IP地址)添加到信任列表|白名单
- 如果提示:对应的服务器证书无效。。。需要服务器重新下载并配置SSL证书;生产环境,必须要配置新的SSL证书
- 临时调试,可以选择取消校验
取消校验域名合法性
接口配置
- 微信开发平台 → 开发
- 开发时可以在微信开发工具 → 详情 → 项目配置中查看
配置合法域名
查看合法域名
wx.request
受小程序体量限制,数据需要搭建本地静态资源服务器保存或使用云存储
微信小程序使用 wx.request 发起网络请求;还可以使用 Axios
请求方式很多,默认是 GET;使用较多的还有 POST;更多信息,请查看官方文档 官方文档 - wx.request
微信小程序支持 回调函数 callback 和 Promise 两种方式
本地静态资源服务器使用,请访问 静态资源服务器动态资源服务器
常见配置项
选项 说明
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(err);
    },
    fail:err=>{
        console.log(err);
    },
    complete: () => {
        console.log('get done logging')
    }
})

. 使用data配置项指定分页参数

wx.request({
    url: this.data.baseUrl + '/goods/page',
    data: {
        page: this.page,
        pageSize: this.pageSize
    },
    success: (res) => {
        console.log(err);
    },
    fail:err=>{
        console.log(err);
    },
    complete: () => {
        console.log('get done logging')
    }
})
使用猫眼API获取信息并渲染到页面
wx.request({
    url:'https://m.maoyan.com/ajax/movieOnInfoList',
    success:(res:any)=>{
        console.log(res.data);
        this.setData({
            list:res.data.movieList
        })
    }
})
POST
数据提交到服务器;应显式的指定方式 metho d和数据 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);
    }
})
如果不确定数据的结构,可以在调试器控制台使用log输出res,一层一层剥离数据,直到拿到需要的数据
请随时关注并确认网络API接口的变化
跨域问题只存在于使用浏览器的WEB开发中。小程序的宿主环境是微信客户端,不是浏览器,不存在跨域的问题