前后端交互1

1. config.js配置文件

export default {
	// #ifndef H5
	baseUrl: 'http://127.0.0.1:7001',
	// #endif
	// #ifdef H5
	baseUrl: '/api',
	// #endif
	socketUrl: 'ws://127.0.0.1:7001/ws',
	env: 'dev'
}

 

2. util.js工具类文件 用于获取和存储缓存　

import $C from './config.js'
export default {
    // 获取存储列表数据
    getStorage(key){
        let data = null;
        if($C.env === 'dev'){
            data = window.sessionStorage.getItem(key)
        } else {
            data = uni.getStorageSync(key)
        }
        return data
    },
    // 设置存储
    setStorage(key,data){
        if($C.env === 'dev'){
            return window.sessionStorage.setItem(key,data)
        } else {
            return uni.setStorageSync(key,data)
        }
    },
    // 删除存储
    removeStorage(key){
        if($C.env === 'dev'){
            return window.sessionStorage.removeItem(key);
        } else {
            return uni.removeStorageSync(key)
        }
    }
}

　　

3. request请求文件，封装发送请求

import $C from './config.js';
import $U from './util.js'

export default {
    // 全局配置
    common:{
        baseUrl:$C.baseUrl,
        header:{
            'Content-Type':'application/json;charset=UTF-8',
        },
        data:{},
        method:'GET',
        dataType:'json',
        token:true
    },
    // 请求 返回promise
    request(options = {}){
        // 组织参数
        options.url = this.common.baseUrl + options.url
        options.header = options.header || this.common.header
        options.data = options.data || this.common.data
        options.method = options.method || this.common.method
        options.dataType = options.dataType || this.common.dataType
        options.token = options.token === false ?  false : this.common.token

        // 请求之前验证...
        // token验证
        if (options.token) {
            let token = $U.getStorage('token')
            // 二次验证
            if (!token) {
                uni.showToast({ title: '请先登录', icon: 'none' });
                // token不存在时跳转
                return uni.reLaunch({
                    url: '/pages/login/login',
                });
            }
            // 往header头中添加token
            options.header.token = token
        }

        // 请求
        return new Promise((res,rej)=>{
            // 请求中...
            uni.request({
                ...options,
                success: (result) => {
                    // 返回原始数据
                    if(options.native){
                        return res(result)
                    }
                    // 服务端失败
                    if(result.statusCode !== 200){
                        if (options.toast !== false) {
                            uni.showToast({
                                title: result.data.data || '服务端失败',
                                icon: 'none'
                            });
                        }
                        return rej(result.data) 
                    }
                    // 其他验证...
                    // 成功
                    let data = result.data.data
                    res(data)
                },
                fail: (error) => {
                    uni.showToast({ title: error.errMsg || '请求失败', icon: 'none' });
                    return rej(error)
                }
            });
        })
    },
    // get请求
    get(url,data = {},options = {}){
        options.url = url
        options.data = data
        options.method = 'GET'
        return this.request(options)
    },
    // post请求
    post(url,data = {},options = {}){
        options.url = url
        options.data = data
        options.method = 'POST'
        return this.request(options)
    },
    // delete请求
    del(url,data = {},options = {}){
        options.url = url
        options.data = data
        options.method = 'DELETE'
        return this.request(options)
    },
}

　

4. 全局mixin auth.js 用于验证是否登录(是否有token缓存)

import $U from '@/common/free-lib/util.js';
export default {
    onShow() {
        let token = $U.getStorage('token')
        if(!token){
            return uni.reLaunch({
                url:"/pages/common/login/login"
            })
        }
    },
}