微信小程序需要ajax吗,在微信小程序中封装自己的ajax

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，我可以做到全局状态管理

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