微信小程序提供了request网络请求的API,可以用于与后台服务器进行数据交互,实现数据的获取和提交等功能。在本文中,将介绍如何使用request网络请求API,并提供一个示例代码,帮助大家更好地理解。

使用request网络请求API的步骤如下:

1.引入request模块

在小程序页面中,需要在页面或者组件的js文件中引入request模块。

const request = require('../../utils/request.js')

2.使用request方法发送请求

可以使用request方法发送请求,代码如下:

request({
  url: 'https://example.com',
  method: 'GET',
  data: {
    id: '123'
  },
  success(res) {
    console.log(res.data)
  },
  fail(error) {
    console.log(error)
  }
})

其中,url参数为请求的地址,method参数为请求方法,data参数为请求参数,success为请求成功的回调,fail为请求失败的回调。

3.封装request方法

可以将request方法封装起来,方便在多个页面和组件中调用。例如:

const request = require('../../utils/request.js')

function fetchData(params) {
  return new Promise((resolve, reject) => {
    request({
      url: params.url,
      method: params.method || 'GET',
      data: params.data || {},
      success(res) {
        resolve(res.data)
      },
      fail(error) {
        reject(error)
      }
    })
  })
}

module.exports = {
  fetchData: fetchData
}

以上代码中,fetchData方法封装了request方法,并返回一个Promise对象,可以更方便地处理请求成功和失败的情况。

示例代码:

我们可以以获取豆瓣电影数据为例,演示如何使用request网络请求API。

1.首先,在小程序的app.js文件中,注册一个全局变量:

App({
  globalData: {
    baseUrl: 'https://douban.uieee.com'
  }
})

2.然后,在utils文件夹下新建request.js文件,并编写request方法:

const baseUrl = getApp().globalData.baseUrl

function request(params) {
  wx.showLoading({
    title: '加载中...'
  })

  wx.request({
    url: baseUrl + params.url,
    method: params.method || 'GET',
    data: params.data || {},
    header: {
      'content-type': 'application/json'
    },
    success(res) {
      wx.hideLoading()
      params.success && params.success(res)
    },
    fail(error) {
      wx.hideLoading()
      params.fail && params.fail(error)
    }
  })
}

module.exports = request

以上代码中,request方法中,baseUrl为我们之前在app.js中注册的全局变量,用于拼接请求地址,showLoading和hideLoading方法,则用于显示和隐藏加载中的提示。

3.最后,在我们需要获取电影数据的页面中,调用fetchData方法:

const util = require('../../utils/util.js')
const { fetchData } = require('../../utils/request.js')

Page({
  data: {
    movies: []
  },

  onLoad() {
    fetchData({
      url: '/v2/movie/top250'
    }).then(res => {
      console.log(res)
      this.setData({
        movies: res.subjects.map(item => {
          return {
            id: item.id,
            title: item.title,
            image: item.images.small,
            average: item.rating.average,
            year: item.year,
            directors: item.directors.map(item => item.name).join('/'),
            casts: item.casts.map(item => item.name).join('/')
          }
        })
      })
    }).catch(error => {
      console.log(error)
      util.showModal('提示', '网络错误,请重试')
    })
  }
})

以上代码中,我们使用fetchData方法,通过豆瓣电影的API接口,获取电影数据,并将数据处理后更新到页面的data中。

总结:

通过以上的介绍和示例代码,相信大家已经掌握了微信小程序request网络请求的使用方法。在实际开发中,我们可以根据自己的需求,封装不同的网络请求方法,以提高代码的可维护性和复用性。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐