Promiseパッケージを使用したウィジェットwx.requestの実現方法
2686 ワード
業務上の必要がありますので、httpごとに依頼先を追加しますので、毎回重複コードをたくさん書きます。
今はwx.requestを簡単にカプセル化しようと試みています。request方法を呼び出して、毎回自動的にheaderヘッダ情報を携帯するように要求します。そうすると、手間が省けます。よくあるget post put deleteの四つの要求方法を含んで、Promise方式の呼び出しをサポートします。
パッケージコード
app.jsに導入する:例えばGet要求は、ajax.get Request(url:String、data:Object)である。 例えばPost要求はajax.postrequestです。 ... 参考:
パッケージwx.request
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
今はwx.requestを簡単にカプセル化しようと試みています。request方法を呼び出して、毎回自動的にheaderヘッダ情報を携帯するように要求します。そうすると、手間が省けます。よくあるget post put deleteの四つの要求方法を含んで、Promise方式の呼び出しをサポートします。
パッケージコード
class request {
constructor() {
this._baseUrl = 'https://xxx.com/api';
this._token = wx.getStorageSync('token');
this._header = {'Authorization': 'Bearer ' + token}
}
/**
* GET
*/
getRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'GET')
}
/**
* DELETE
*/
deleteRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'DELETE')
}
/**
* PUT
*/
putRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'PUT')
}
/**
* POST
*/
postRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'POST')
}
/**
*
*/
requestAll(url, data, header, method) {
return new Promise((resolve, reject) => {
wx.request({
url: this._baseUrl + url,
data: data,
header: header,
method: method,
success: (res => {
if (res.statusCode === 200) {
//200:
resolve(res)
} else {
// ,
reject(res)
}
}),
fail: (res => {
reject(res)
})
})
})
}
}
export default request
使い方app.jsに導入する:
import request from './request.js'
App({
myRequest(){
return new request();
}
})
使用するページに取り入れるだけでいいです。
const app = getApp();//
const ajax = app.myRequest();// request()
Page({
data:{},
onLoad(){
this.getData();
},
getData(){
ajax.getRequest('/getList',{id: 1024}).then((res)=>{
console.log(res);
}).catch((err)=>{
console.log(err);
})
}
})
使い方も非常に簡単です。パッケージwx.request
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。