小程序 | 12-网络请求

CnPeng

发布于 2021-05-17 15:17:10

6820

发布于 2021-05-17 15:17:10

文章被收录于专栏：CnPengDevCnPengDev

1. 介绍

官方 API 文档：

https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

官方指南文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

1.1. wx.request(Object object)

微信提供了 wx.request(Object object) 用来发起网络请求，

其中，object 可传递的内容包括：

1.2. 注意事项

在使用网络请求 API 前需要先在 小程序后台-开发-开发设置-服务器域名 中配置服务器域名。不配置的话触发网络请求时会报错。

测试阶段可以在微信开发者工具界面中勾选 详情-本地设置 中的 不校验合法域名。

2. 基本使用

测试网络请求时，可以使用 httpbin.org

2.1. 无参 Get

// pages/about/about.js
Page({
  onLoad: function (options) {
    // 1. 基本的 Get 请求——不携带参数
    wx.request({
      url: 'http://httpbin.org/get',
      success: function (res) {
        // 接口请求成功时打印数据
        console.log(res)
      }
    })
  }
})

2.2. 有参 GET 请求

// pages/about/about.js
Page({
  onLoad: function (options) {
    // 2. Get 请求携带参数
    wx.request({
      url: 'http://httpbin.org/get',
      data:{  // 发起请求时携带的数据
        type:'sell',
        page:1
      },
      success:function(res){
        // 接口请求成功时打印数据
        console.log(res)
      },
      fail:function(err){
        // 接口请求失败
        console.log(err)
      }
    })
  }
})

2.3. 有参 POST 请求

// pages/about/about.js
Page({
  onLoad: function (options) {
    // 3. Post 请求携带参数
    wx.request({
      url: 'http://httpbin.org/post',
      method:'post',
      data:{  // 发起请求时携带的数据
        type:'sell',
        page:1
      },
      success:function(res){
        // 接口请求成功时打印数据
        console.log(res)
      }
    })
  }
})

3. 封装请求

降低网络请求和 wx.request() 的耦合，参考前端的网络框架——axios 使用 Promise 的方式封装一个工具类。

network.js

// 定义函数，并使用 es6 中的 export default 方式导出——让外部可以调用
export default function request(options) {
  // 此处使用了 Promise 语法
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method: options.method || "get",
      data: options.data || {},
      success:resolve,
      fail:reject
      // 下面两个函数可以简写为上面两行
      // success: function (res) {
      //   resolve(res)
      // },
      // fail: function (err) {
      //   reject(err)
      // }
    })
  })
}

about.js

// pages/about/about.js
// 此处导入时必须写相对于当前 js 的相对路径
import request from "../../services/network.js"

Page({
  onLoad: function (options) {
    // 调用自定义的 promise 方式的 request 函数
    request({
      url: 'http://httpbin.org/get',
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
})