微信小程序 http请求封装详解及实例代码

针对“微信小程序 http请求封装详解及实例代码”，我提供如下攻略：

1. http请求封装

在微信小程序中，我们可以使用 wx.request 方法进行网络请求。但是在实际开发中，我们可能会在多个地方用到网络请求，而每一次都写一遍请求代码不太方便，也容易出错。因此，我们可以将 http 请求进行封装，提高开发效率和代码可维护性。

1.1 封装方法

我们可以在 util 文件夹下新建一个 http.js 文件，将 http 请求封装在一个函数中：

/**
 * http请求封装
 * @param {string} url 请求的地址
 * @param {object} data 请求携带的参数
 * @param {string} method 请求的方法
 * @returns {Promise}
 */
function http(url, data = {}, method = 'GET') {
  return new Promise((resolve, reject) => {
    // 发起网络请求
    wx.request({
      url,
      data,
      method,
      success(res) {
        // 请求成功，返回数据
        resolve(res.data)
      },
      fail(error) {
        // 请求失败，返回错误信息
        reject(error)
      }
    })
  })
}

以上就是一个简单的 http 封装代码。这个方法接收三个参数，分别是请求的 url、data 和请求方法 method。返回一个 Promise 对象，实现了异步调用。

1.2 使用方法

使用 http 封装的方法很简单，只需要在需要请求数据的地方调用 http 方法即可：

import { http } from '../util/http.js'

http('https://api.example.com/data').then(data => {
  console.log(data)
}).catch(error => {
  console.error(error)
})

以上代码中，我们引入了 http 封装方法，然后调用该方法获取 https://api.example.com/data 这个 url 的数据，在请求成功或失败时分别打印控制台信息。

2. http请求示例

我们以获取豆瓣 API 上的电影信息为例，演示如何使用上述的 http 请求封装方法。

2.1 设置API

首先，我们需要在小程序后台的开发设置中打开服务端 API 功能，然后在 “安全域名” 中添加豆瓣 API 的域名：api.douban.com。

2.2 获取API Key

接下来，我们需要到豆瓣开发平台注册一个账户，并创建一个“我的应用”获取 API Key。

2.3 封装方法

我们可以将使用豆瓣 API 的封装方法写在 http.js 的文件中：

import { API_KEY } from '../config/config.js'

/**
 * 获取电影列表
 * @param {string} type 电影类型
 * @param {number} start 从第几个电影开始获取
 * @param {number} count 获取电影数量
 * @returns {Promise}
 */
function getMovieList(type, start = 0, count = 5) {
  return http(`https://api.douban.com/v2/movie/${type}?start=${start}&count=${count}&apikey=${API_KEY}`)
}

module.exports = {
  http,
  getMovieList
}

这个封装方法的作用是根据电影类型从豆瓣 API 中获取电影列表。其中，API_KEY 是我们从豆瓣开发平台获取的 API Key。

2.4 使用方法

在需要获取电影列表的地方，我们只需要调用 getMovieList 方法即可：

import { getMovieList } from '../util/http.js'

Page({
  data: {
    movies: []
  },
  onLoad() {
    getMovieList('top250', 0, 10).then(data => {
      this.setData({ movies: data.subjects })
      console.log(data)
    }).catch(error => {
      console.error(error)
    })
  }
})

使用 getMovieList 方法获取 top250 类型的电影列表，并在请求成功时将电影列表存储到页面数据中，同时打印控制台信息。在请求失败时，打印错误信息。

以上是一个简单的 http 请求封装的攻略，以及一个示例讲解。希望能够对你有所帮助。