Shulou(Shulou.com)06/01 Report--

The knowledge of this article "how WeChat Mini Programs makes api interceptor" is not quite understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how WeChat Mini Programs makes api interceptor" article.

Installation

Npm install wxapp-api-interceptors-save uses items such as mpvue import wxApiInterceptors from 'wxapp-api-interceptors';wxApiInterceptors (); / / the native Mini Program project must be called before calling Mini Program api.

Download the project and extract 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 (); / / you must call Mini Program api before calling Mini Program api

It is not necessary to pass success, complete, and fail parameters.

Cdn.github.com/images/icons/emoji/unicode/26a0.png "> ⚠️ Note: Promise.finally is not supported in native Mini Program projects.

Functional asynchronous invocation:

Wx.showLoading ({title: 'login...'}) .then (wx.login) .then (data = > wx.request.post ('/ login', {data})) .then (() = > wx.showToast ({title: 'login successful'})) .catch () = > wx.showToast ({title: 'login failed'}) .finally (wx.hideLoading) Also compatible with native calling methods (inconvenient to maintain): wx.showLoading ({title: 'logging in...', 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,}) },}); custom interceptor

Usage and parameters: wxApiInterceptors ({[api]: {[request] (params): params, [response] (res): res}})

For example, the default value of intercepting wx.showModal is red. After a successful call, the result returned by the call is intercepted.

WxApiInterceptors ({showModal: {request (params) {if (params.confirmColor = undefined) {params.confirmColor = 'red';} return params;}, response (res) {res =' successful call'; return res;},}}) Wx.showModal ({title: 'test'}) .then (console.log); / / output of control: the successful call intercepts request api by default, encapsulating it in a way similar to axios.

Call wx.request [method] (url, [config]) to send an axiosed request.

Default GET request

Wx.request ('https://test.com/banner'). Then (({data}) = > {console.log (data);}) other request methods wx.request.post (' https://test.com', {data: {userName: 'test'}}). Then (({data}) = > {console.log (data);}) of course, you can continue to intercept request api.

For example, set the default host of request api:

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

You can even intercept your business status code:

WxApiInterceptors ({request: {response (res) {const {data: {code}} = res; / / if the code in the data is equal to-1, the response is failed if (code =-1) {return Promise.reject (res);} return res;},},}); powerful async interceptor

For example, when you call request api, you always bring the locally stored token in the header. If not, get it from the server:

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;},},}) The above is about the content of this article on "how to make api interceptor by WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.