微信小程序提供了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中。
总结:文章来源:https://www.toymoban.com/news/detail-766953.html
通过以上的介绍和示例代码,相信大家已经掌握了微信小程序request网络请求的使用方法。在实际开发中,我们可以根据自己的需求,封装不同的网络请求方法,以提高代码的可维护性和复用性。文章来源地址https://www.toymoban.com/news/detail-766953.html
到了这里,关于【小程序教程】微信小程序之request网络请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!