本文共计两种封装 wx.request
不同点在于是否引入第三方依赖插件
1. util.js
const src = "https://baidu.com ";
//请求数据
const ajax = function (url, config, success, err) {
let opt = {
url: src + url,
data: config.data || "",
method: !config.method ? 'GET' : config.method.toUpperCase(),
header: config.header || {},
dataType: config.datatype || 'json',
success: function (res) {
if (res.statusCode != 200) {
wx.showToast({
title: '网络错误',
icon: 'none'
})
} else {
success && success.call(this, res.data);
}
},
fail: function (e) {
fail && fail.call(this, e);
wx.showToast({
title: '网络错误',
icon: 'none'
})
}
}
wx.request(opt)
}
module.exports = {
ajax: ajax
}
在pages/index/index.js
import { ajax } from "../../utils/util.js"
...
getData:function(){
ajax('/api/page/data?data=' + JSON.stringify({
token: this.data.token,
...
}),{
header: {
'Accept': 'application/x-www-form-urlencoded', // 默认值
},
method: "get",
}, res => {
this.setData({
banners: res.data
})
})
}
2. util.js
const qs= require('../static/js/qs.js');
//封装接口
let baseURL = 'http://baidu.com/'; //接口路径
let request = function (url, options = {}) {
let myUrl = `${baseURL}${url}`;
// 处理method,data,params=> 查询字符串
// 如果有请求头
// 合并对象data
// 如果params 添加查询字符串参数
//接口的参数
if (options.params) {
let urlQueryString = qs.stringify(options.params, { //使用到qs ,先下载,后引入
addQueryPrefix: true,
allowDots: true,
});
myUrl += urlQueryString;
}
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中...',
});
wx.request({
method: 'get',
url: myUrl,
success: resolve,
fail: reject,
complete: wx.hideLoading,
...options //直接展开
});
});
}
// 将这个接口暴露出去
module.exports = {
request:request
}
在app.js中引入
const { request }=require('./utils/util.js');
//向外提供属性
globalData: {
request
}
在pages/index/index.js
使用 async await
//解构赋值
const { request } =getApp().globalData;
...
let swipe = await request('slides', {
method: 'get',
params: {
a: 1, b: 2
},
});
网友评论