アプレットwx.requestカプセル化

さっそく、袖をまくって仕事に取りかかりましょう！！！！！！！！！！！！！！！！！！！！！！！！？

ドメイン名の設定

通常、プロジェクトのドメインプレフィックスはapp.js で設定します。

App({
 onLaunch: function() {
 },
 globalData: {
 userInfo: null,
 loginCode: null,
 version: '1.0.0',
 host: 'https://**',
 }
})

カプセル化 wx.request

アプレットディレクトリにapiフォルダを作成し、その中にapi.jsスクリプトを作成します。 wx.requestをラップし始めます。

const app = getApp()
const request = (url, options) => {
 return new Promise((resolve, reject) => {
 wx.request({
 url: `${app.globalData.host}${url}`,
 method: options.method,
 data: options.method === 'GET' ? options.data : JSON.stringify(options.data),
 header: {
 'Content-Type': 'application/json; charset=UTF-8',
 'x-token': 'x-token' // 必要なら
 },
 success(request) {
 if (request.data.code === 2000) {
 resolve(request.data)
 } else {
 reject(request.data)
 }
 },
 fail(error) {
 reject(error.data)
 }
 })
 })
}
const get = (url, options = {}) => {
 return request(url, { method: 'GET', data: options })
}
const post = (url, options) => {
 return request(url, { method: 'POST', data: options })
}
const put = (url, options) => {
 return request(url, { method: 'PUT', data: options })
}
// DELETEは宣言できない。
const remove = (url, options) => {
 return request(url, { method: 'DELETE', data: options })
}
module.exports = {
 get,
 post,
 put,
 remove
}

api インターフェイスの管理

プロジェクト内のほとんどのapiは再利用可能です。後でそれらを保守・管理するためには、この時点でapiを立ち上げておく必要があります。これを行うには、モジュールごとにjsスクリプトをビルドするなど、いくつかの方法があります。以下はその例です：

const login = '/user/login' //  
module.exports = {
 login
}

カプセル化されたapiの使用

import api from '../api/api'
import { login } from '../**/conf' // リンクが正しく記入されていることに注意
api.post(login, {
 data: ''
}).then(res => {
 if(){}
}).catch(err => {
 wx.showToast({
 title: err.message,
 icon: 'none'
 })
})

post リクエストは api.post()...、get リクエストは api.get()...です。getリクエストはapi.get()...