评论

在微信小程序中封装自己的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,我可以做到全局状态管理

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

最后一次编辑于  07-25  
点赞 1
收藏
评论

2 个评论

  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    07-25

    我们的请求封装是放在app.js下。这样 不用每个页面单独引用下。直接getApp().ajax就可以请求

    07-25
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    07-25

    我喜欢这样的:

     app.$ajax.post('https://api,xxx.com', postData).then(res => {     if (res.success) { //请求成功的操作 } else { wx.showToast({title: res.msg}) } })

    07-25
    赞同
    回复