Applets API interceptor

• Perfect compatibility with native applets
• Perfect combination of small program API original call way, painless migration
• Applets API full Promise
• Same request as Axios
• The applets API customizes interceptor call parameters and returns results
• Powerful Async interception

Quick start

The installation

npm install wxapp-api-interceptors --saveCopy the code

use

Mpvue etc.

import wxApiInterceptors from 'wxapp-api-interceptors'; wxApiInterceptors(); // Must be called before the applets API is calledCopy the code

Native applets project

Download the project and unzip the wxapiInterceptors. js and Runtime. js files in the mobile folder dist to your own project, as shown in the example.

const wxApiInterceptors = require('./wxApiInterceptors'); wxApiInterceptors(); // Must be called before the applets API is calledCopy the code

Applets API calls

⚠️ Note: Native applet projects do not support promise.finally

Functional asynchronous invocation:

Wx. showLoading({title: 'Loading... '}) .then(wx.login) .then(data => wx.request.post('/login', {data})) .then(() => wx.showToast({title: 'login successful})). The catch (() = > wx. ShowToast ({title:' login failed})), the finally (wx. HideLoading);Copy the code

Also compatible with native invocation (inconvenient maintenance) :

Wx. showLoading({title: 'Loading... ', success: () => { wx.login({ success: (data) => { wx.request({ url: '/login', data, success: () = > wx. ShowToast ({title: 'login successful}), fail: () = > wx. ShowToast ({title:' login failed}), complete: wx. HideLoading,}); }}); }});Copy the code

Custom interceptors

For example, intercepting wx.showModal confirmColor defaults to red and intercepts the result returned by the successful call.

wxApiInterceptors({ showModal: { request(params) { if (params.confirmColor === undefined) { params.confirmColor = 'red'; } return params; }, response(res) {res = 'call successful '; return res; }}}); Wx.showmodal ({title: 'test '}).then(console.log); // Control output: call successfulCopy the code

The request API is intercepted by default, encapsulated in a similar way to axios

The defaultGETrequest

wx.request('https://test.com/banner')
    .then(({data}) => {
        console.log(data);
    })Copy the code

Other request methods

wx.request.post('https://test.com', {data: {userName: 'test'}})
    .then(({data}) => {
        console.log(data);
    })Copy the code

You can also continue intercepting the Request API

For example, set the default host for the Request API:

wxApiInterceptors({ request: { request(params) { const host = 'https://test.com' if (! /^(http|\/\/)/.test(params.url)) { params.url = host + params.url; } return params; ,}}});Copy the code

You can even intercept your own business status code:

wxApiInterceptors({ request: { response(res) { const {data: {code}} = res; If (code === -1) {return promise.reject (res); } return res; ,}}});Copy the code

Powerful Async interceptor

wxApiInterceptors({ request: { async request(params) { if (params.header === undefined) { params.header = {}; } let token = wx.getStorageSync('token'); if (! token) { ({data: token} = await wx.request('/getToken')); wx.setStorageSync('token', token); } params.header.token = token; return params; ,}}});Copy the code