Simple encapsulation of some common parameters of uni.request to reduce repetitive data request code. Facilitate global invocation.

First create the utils and Common folders under the directory

Utils is for utility classes and common is for common methods

Requset.js is then created in utils to place the request method for uni.request and is then simply wrapped.

Requset. Js code

import operate from '.. / / / common/operate. Js' vuex use Details refer to the website https://uniapp.dcloud.io/vue-vuex import store from '.. /store/index.js' export default class Request {HTTP (param) {var url = param.url, method = param.method, header = {}, data = param.data || {}, token = param.token || "", hideLoading = param.hideLoading || false; Var requestUrl = operate. API + url; Var requestUrl = operate.api() + url; // Request mode :GET or POST(POST needs to be configured // header: {'content-type' : "application/x-www-form-urlencoded"},) if (method) { method = method.toUpperCase(); If (method == "POST") {header = {'content-type': "application/x-www-form-urlencoded"}; if (method == "POST") {header = {'content-type': "application/x-www-form-urlencoded"}; } else { header = { 'content-type': "application/json" }; }} // load circle if (! HideLoading) {uni. ShowLoading ({title: 'Loading... '}); Return new promise ((resolve, reject) => {// request uni. Request ({url: requestUrl, data: data, method: If (res.statusCode && res.statusCode! = 200) {uni.showtoast ({title: "API error" + res.errmsg, icon: 'none'}); return; (e) => {uni.showtoast ({title: "" + e.data.msg, icon: 'none'}); resolve(e.data); }, // Request complete() {// Hide loading if (! hideLoading) { uni.hideLoading(); } resolve(); return; }})})}}Copy the code

Create operate.js and api.js in common, respectively

Operate.js is used to place the request interface API address

Export the default {/ / interface API: "http://192.168.208.126:8080",}Copy the code

Switch the interface address according to the applet environment

Export default {// API: function() {let version = wx.getAccountInfoSync().miniprogram.envVersion; Switch (version) {case "develop": // return "https://www.baidu.com/" break; Case 'trial': // Experience version return "https://www.baidu.com/" break; Case 'release': // return "https://www.baidu.com/" break; Default :// unknown. Return "http://www.baidu.com/" break; }}Copy the code

Use method one (global request)

Create API folder with directory: Create api.js

Api.js is used to call our encapsulated uni.request and manage the request interface in a unified way. In the future development, we only need to call the request in api.js in the page

Import Request from '@/utils/requset.js' let Request = new Request(). HTTP // Global definition Request header export default {// Request style ClassifyLeft: function(data) {return request({url: "/category/list", // request header method: "GET", // Request type: Function (data) {return request({url: "/ /banner", // request header method: "GET", // request method data: data, // request data token: token, // can pass hideLoading: false, // load style})}, */Copy the code

The call of api.js can be called globally in main.js or in a required page. It can be decided whether to call globally according to the actual situation. Only global calls are covered below

Import api.js in mian.js

Prototype $API = API 2. Prototype $API = API 3. This.$api.sendrequest ().then((res) => {console.log(res); }) / / preach and enclosing $API. The sendRequest (} {parameter). Then (= > {(res). The console log (res); })Copy the code

Project address: gitee.com/jielov/uni-…

Usage method 2 (Page introduced separately)

User.js is used to call our encapsulated uni.request and manage the request interface uniformly. In the future development, we only need to call the request in user.js in the page

import Request from '@/utils/requset.js' import operate from '@/common/operate.js' let request = new Request().http // Export const getUserInfo= function(data) {return request({URL: "order/user ", method: "POST", data: data, token: operate.isToken() }) }Copy the code

Page use

// import {getUserInfo} from '@/ API /user.js' // add life cycle init() {getUserInfo().then((res) => { console.log(res); })},Copy the code