wx.request(Object object) 是微信小程序官方给出的网络请求接口。

下面我们把它变成便于我们使用的ajax。

1，创建一个js文件。
我是在utils目录中创建了一个wxset.js

2，在创建的js文件中编写ajax函数。

//网络请求,e=请求方式,r[0]=api地址 r[1]=向后台发送的数据
//callback=回调函数
function Ajax(e, r, callback) {

var method = ‘POST’; //默认请求方式

if (typeof e === ‘string’) {
method = e
} else {
callback = r;
r = e;
}

//要请求的服务器地址，Host是你的服务器地址，是你的 api 地址 r[0]
var url = Host + r[0];

var a = wx.request({
url: url,
method: method,
data: r[1],
header: {
“Content-Type”: “application/x-www-form-urlencoded”,
},
success: res => {

if (Array.isArray(callback)) {
callback[0] (res.data);
} else {
callback(res.data);
}
},
fail: res => {

if (callback[1]) {
callback[1] (res);
} else {
wx.showToast({
title: ‘服务器开了小差’,
icon: ‘none’,
duration: 3000
})
}
}

})
}

这是我喜欢使用的传参方式，自己编写自己喜欢的传参方式哦。

3，导出封装好的方法。

//对外开放接口
module.exports = {
Ajax:Ajax //Ajax es6语法 小程序可以兼容es6可以放心使用
}

4，导入到全局对象getApp()中方便使用。

//app.js
import wxset from ‘./utils/wxset.js’

在app.js中将我们的文件引入，

App({
ajax: wxset.Ajax,
})

在App中声明ajax变量，方便我们在任何页面使用。

5，使用。

// pages/my/my.js
const app = getApp();

在my页面我声明一个app

onShow: function() {

//app.ajax() 就是我们自己编写的那个函数
//我传入2个参数，也就是相当于上面的r, callback
//因为默认是post传参，所以没必要传3个参数

app.ajax([app.api.my_status, {}], (res) => {
if (res.code == 0) {
this.setData({status: res.data})
}
})

}

6，我这样做的好处是。

 1，简化代码减少不必要的参数
 2，我可以做到全局请求拦截
 3，我可以做到全局状态管理

下次讲全局请求拦截与全局状态管理