在項(xiàng)目根目錄下新建service文件夾，后續(xù)封裝的文件放在這個(gè)文件夾下。

image.png

主要的封裝是在LsxmRequest.js中，配置項(xiàng)在config.js中，api.js為接口的統(tǒng)一管理文件，項(xiàng)目接口增多時(shí)，可以考慮按照功能塊對(duì)api.js進(jìn)行進(jìn)一步劃分成多個(gè)模塊，最后import到api.js中。
1、利用Symbol特性定義四個(gè)私有變量，防止變量污染

const config = Symbol('config')
const isCompleteURL = Symbol('isCompleteURL')
const requestBefore = Symbol('requestBefore')
const requestAfter = Symbol('requestAfter')

2、定義LsxmRequest類并添加默認(rèn)配置、攔截器與請(qǐng)求方法

class LsxmRequest {
    //默認(rèn)配置
    [config] = {
        baseURL: '',
        header: {
            'content-type': 'application/json'
        },
        method: 'GET',
        dataType: 'json',
        responseType: 'text'
    }
    //攔截器
    interceptors = {
        request: (func) => {
            if (func) 
            {
                LsxmRequest[requestBefore] = func
            } 
            else 
            {
                LsxmRequest[requestBefore] = (request) => request
            }
        },
        response: (func) => {
            if (func) 
            {
                LsxmRequest[requestAfter] = func
            } 
            else 
            {
                LsxmRequest[requestAfter] = (response) => response
            }
        }
    }

    static [requestBefore] (config) {
        return config
    }

    static [requestAfter] (response) {
        return response
    }

    static [isCompleteURL] (url) {
        return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
    }
    
    request (options = {}) {
        options.baseURL = options.baseURL || this[config].baseURL
        options.dataType = options.dataType || this[config].dataType
        options.url = LsxmRequest[isCompleteURL](options.url) ? options.url : (options.baseURL + options.url)
        options.data = options.data
        options.header = {...options.header, ...this[config].header}
        options.method = options.method || this[config].method

        options = {...options, ...LsxmRequest[requestBefore](options)}

        return new Promise((resolve, reject) => {
            options.success = function (res) {
                resolve(LsxmRequest[requestAfter](res))
            }
            options.fail= function (err) {
                reject(LsxmRequest[requestAfter](err))
            }
            uni.request(options)
        })
    }

    get (url, data, options = {}) {
        options.url = url
        options.data = data
        options.method = 'GET'
        return this.request(options)
    }

    post (url, data, options = {}) {
        options.url = url
        options.data = data
        options.method = 'POST'
        return this.request(options)
    }
}

3、后續(xù)需要自定義config與獲取接口地址，在類中添加get和set方法：

setConfig (func) {
        this[config] = func(this[config])
}
getConfig() {
    return this[config];
}

4、用自定義插件注冊(cè)的方法將apis.js（后續(xù)在main.js中需要導(dǎo)入apis.js）中的接口賦到自定義的Vue原型變量$lsxmApi上，為了避免每個(gè)頁(yè)面都要引入一次，在每個(gè)頁(yè)面的beforeCreate生命周期混入。

LsxmRequest.install = function (Vue) {
    Vue.mixin({
        beforeCreate: function () 
        {
            if (this.$options.apis) 
            {
                console.log(this.$options.apis)
                Vue._lsxmRequest = this.$options.apis
            }
        }
    })
    
    Object.defineProperty(Vue.prototype, '$lsxmApi', {
        get: function () 
        {
            return Vue._lsxmRequest.apis
        }
    })
}

export default LsxmRequest

5、在config.js中實(shí)例化并自定義請(qǐng)求配置項(xiàng)(此處根據(jù)項(xiàng)目需要在頭部加入token)與攔截器

import LsxmRequest from './LsxmRequest'

const lsxmRequest = new LsxmRequest()

// 請(qǐng)求攔截器
lsxmRequest.interceptors.request((request) => {
    if (uni.getStorageSync('token')) {
        request.header['token'] = uni.getStorageSync('token');
    }
    return request
})

// 響應(yīng)攔截器
lsxmRequest.interceptors.response((response) => {
    console.log('beforeRespone',response);
    // 超時(shí)重新登錄
    if(response.data.isOverTime){
    uni.showModal({
            title:'提示',
            content:'您已超時(shí),請(qǐng)重新登錄!',
            showCancel:false,
            icon:'success',
            success:function(e){
                if(e.confirm){
                    uni.redirectTo({
                        url: '/pages/login/login'
                    })
                }
            }
        }); 
    }
    else
    {
        return response;
    }
})

// 設(shè)置默認(rèn)配置
lsxmRequest.setConfig((config) => {
    config.baseURL = 'http://xxxxx.com'
    
    if (uni.getStorageSync('token')) {
        config.header['token'] = uni.getStorageSync('token');
    }
    return config;
})

export default lsxmRequest

6、main.js中引入，將apis掛載到Vue上

import LsxmRequest from './service/LsxmRequest.js'
import apis from './service/apis.js'
import lsxmRequest from './service/config.js'
Vue.use(LsxmRequest)
Vue.prototype.baseDomain = lsxmRequest.getConfig().baseURL
App.mpType = 'app'

const app = new Vue({
    store,
    apis,
    ...App
})
app.$mount()

7、需要添加接口時(shí)，只需在apis.js中添加接口即可(后續(xù)可將apis.js中的接口按照功能拆分，模塊化管理)

import lsxmRequest from './config.js'
export default{
  apis:{
        //獲取驗(yàn)證用戶令牌
        getLoginToken(data){
            return lsxmRequest.post('/xxx/xxx/getLoginToken', data)
        },
        //登錄
        login(data){
            return lsxmRequest.post('/xxx/xxx/login', data)
        }
        }
}

8、至此,頁(yè)面中即可使用

this.$lsxmApi.getLoginToken({}).then((resToken) => {
        console.log(resToken)
}

未經(jīng)允許，不可轉(zhuǎn)載