Enterprise level ~uni app network request encapsulation

Directory structure ( The root directory starts )

├── api                        #  All requests 
│   └── user.js          	   #  User request api
├── store                      #  overall situation store management 
│   └── modules          	   # api modular 
│   │   └── user.js            #  User request module 
│   └── index.js          	   #  State management initialization 
├── utils                      #  Global common method 
│   ├── auth.js                #  Local cache 
│   ├── env.js                 #  Common parameters 
│   └── request.js             #  Network request middleware 
└── main.js                    #  Entrance file   Load components   Initialization etc. 

Here is the content of the document

api/user.js( User request api)

//  Reference the network request middleware 
import request from './../utils/request';
/**
 *     Login request 
 */
export function login(data) {
    
	return request({
    
		url: '/user/login',
		method: 'POST',
		data
	})
}

store/modules/user.js( User request module )

//  Reference user request api
import {
    login} from '../../api/user';
import {
    setToken} from '../../utils/auth';

// Here are the parameters of the example wechat applet , You can modify the request parameters by yourself 
const actions = {
    
	login({
    commit}, param) {
    
	    return new Promise((resolve, reject) => {
    
	        login({
    
				iv: param.iv,		//  Request parameters ( You can modify )
				code: param.code	//  Request parameters ( You can modify )
			}).then(response => {
    
				//  You can add your own methods here 
				//  Save the obtained token To the local and so on 
				//  Must be in resolve Before execution 
				setToken(response.token)	// Will get token Save to local 
	            resolve(response)
	        }).catch(error => {
    
	            console.log(error)
	        })
	    })
	}
};

export default {
    
    namespaced: true,
    actions
}

store/index.js( State management initialization configuration )

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)
const store = new Vuex.Store({
    
	modules: {
    
		user
	}
});

export default store

utils/auth.js( Local cache configuration )

const TokenKey = 'token';

//  Authentication token 
export function getToken() {
    
	return uni.getStorageSync(TokenKey)
}

export function setToken(token) {
    
	return uni.setStorageSync(TokenKey, token)
}

export function removeToken() {
    
	return uni.removeStorageSync(TokenKey)
}

utils/env.js( Common parameters )

"use strict";
//  Variables can be added and modified by themselves 
export default {
     // A container for storing variables 
	appid: '****',
	baseUrl: 'http://**.***.***.***'
}
/**
 * 	appid : 		 Applet appid
 *  baseUrl : 		 Server domain name 
 */

utils/request.js( Network request middleware )

import {
    getToken,removeToken} from '../utils/auth';
import env from '../utils/env';

function service(options = {
    }) {
    
	options.url = `${
     env.baseUrl}${
     options.url}`;
	//  Determine whether there is a local token, If it exists, take the request header 
	if (getToken()) {
    
		options.header = {
    
			'content-type': 'application/json',
			'Authorization': `${
     getToken()}`	//  Here is token( You can modify )
		};
	}

	return new Promise((resolved, rejected) => {
    
		options.success = (res) => {
    
			//  If the requested status code is not 200 Then do the following 
			if (res.data.code !== 200) {
    
				//  Unsuccessful status code pop-up 
				uni.showToast({
    
					icon: 'none',
					duration: 3000,
					title: `${
     res.data.msg}`
				});
				//  Login failure 
				if (res.data.code === 403) {
    
					//  Clear the place token
					removeToken()
					//  Close all pages and return to the login page 
					uni.reLaunch({
    
						url: '/pages/login/login'
					})
				}
				//  Return error message 
				rejected(res)
			} else {
    
				//  The requested status code is 200 Then return the content 
				resolved(res.data.data)
			}
		};
		options.fail = (err) => {
    
			//  Request failed Popup 
			uni.showToast({
    
				icon: 'none',
				duration: 3000,
				title: ' Server error , Please try again later '
			});
			rejected(err);
		};
		uni.request(options);
	});
}

export default service;