【小程序教程】微信小程序之request网络请求_微信小程序 request

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

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

1.引入request模块

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

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

2.使用request方法发送请求

可以使用request方法发送请求，代码如下：

request({
  url: 'https://example.com',
  method: 'GET',
  data: {
    id: '123'
  },
  success(res) {
    console.log(res.data)
  },
  fail(error) {
    console.log(error)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

其中，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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

示例代码：

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

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

App({
  globalData: {
    baseUrl: 'https://douban.uieee.com'
  }
})
1
2
3
4
5

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

以上代码中，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('提示', '网络错误，请重试')
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

总结：

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