微信小程序跟支付宝小程序都提供了一个发起 HTTPS 网络请求的方法request,那么为了节省一些操作我们有必要对它进行一个二次的封装
根目录创建api文件夹
在api文件下创建request.js文件,然后引入getApp()、loading组件,同时使用文档上的方法创建:
import * as loader from '../components/loading'
export function request(config) {
// 加载loading
loader.showLoading()
let port = app.globalData.address;
// 解构赋值
let {
url = '',
data = {},
method = 'POST'
} = { ...config }
return new Promise((resolve, reject) => {
my.request({
url: port + url,
method: method,
data: {...data},
success: (res) => {
loader.hideLoading()
resolve(res.data)
},
fail: (err) => {
loader.hideLoading()
reject(err)
}
});
})
}
页面上使用方法
一、在api文件下创建配置参数地址方法
比如index首页需要请求接口,那么在api文件下创建getIndex.js,然后再创建提供调用的方法:
import { request } from '../api/request'
/* 商家信息 */
export const getIndexData = (data) => {
return request({
url: '/DSP_API/video/getVideoDetail',
method: 'POST',
data
})
}
这里以对象的方式传递过去,request拿到对象数据用es6解构赋值拿到对应的参数
二、页面调用getIndex.js方法
import { getIndexData } from '../../api/getIndex'
let app = getApp()
Page({
data: {
},
onLoad() {
this._getIndexData()
},
_getIndexData(){
const data = {
"video_id": "292"
}
getIndexData(data).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
});
网友评论