uni-app 環境配置，uni.request封裝，接口配置，全局配置，接口調用的封裝

common文件夾下新建config.jsjson

let url_config = ""

if(process.env.NODE_ENV === 'development'){ // 開發環境
    url_config = 'https://*****.com/' }else{ // 生產環境
    url_config = 'https://*****.com/' } export default url_config

2.uni.request封裝api

common文件夾下新建request.js網絡

import urlConfig from './config.js'

const request = {} const headers = {} const PORT1 = '/baseinfo' request.globalRequest = (url, method, data, power) => { /* 權限判斷 由於有的接口請求頭可能須要添加的參數不同，因此這裏作了區分 1 == 不經過access_token校驗的接口 2 == 文件下載接口列表 3 == 驗證碼登陸 */
        
    switch (power){ case 1: headers['Authorization'] = 'Basic a3N1ZGk6a3N1ZGk='
            break; case 2: headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='
            break; case 3: responseType = 'blob'
            break; default: headers['Authorization'] = `Bearer ${ this.$store.getters.userInfo }` headers['TENANT-ID'] = this.$store.getters.userInfo.tenant_id break; } return uni.request({ url: urlConfig + url, method, data: data, dataType: 'json', header: headers }).then(res => { if (res[1].data.status && res[1].data.code == 200) { return res[1] } else { throw res[1].data } }).catch(parmas => {

　　　　　　switch (parmas.code) {

　　　　　　　　case 401:

　　　　　　　　　　uni.clearStorageSync()

　　　　　　　　　　break

　　　　　　　　default:

　　　　　　　　　　uni.showToast({

　　　　　　　　　　　　title: parmas.message,

　　　　　　　　　　　　icon: 'none'

　　　　　　　　　　})

　　　　　　　　　　return Promise.reject()

　　　　　　　　　　break

　　　　　　}

})

 } 

export default request

3.接口配置app

項目根目錄下新建api文件，api下新建index.js函數

import request from '@/common/request.js' import { formatGetUri } from '@/common/util.js'

const api = {} const PORT1 = 'baseinfo'
// 註冊獲取驗證碼
api.register = params => request.globalRequest(`${PORT1}/mobile/signUp`, 'GET //必須大寫，爲了兼容其餘應用', params, 1) export default api

4.全局配置this

在main.js中新增url

import Vue from 'vue' import App from './App' import store from './store' // 與vue項目中配置相同，可自行配置 import request from './common/request.js' import api from './api/index.js' import url from './common/config.js' Vue.config.productionTip = false Vue.prototype.$request = request Vue.prototype.$api = api Vue.prototype.$url = url App.mpType = 'app'

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

5.接口調用spa

this.$api.register({mobile: this.mobile}).then(res => { // 得到數據 
 console.log(res) }).catch(res => {
　　// 失敗進行的操做
})

6.推薦.net

在uni-app擴展組件中找到了一個封裝的案例，你們若是以爲能夠的話，可試用 request網絡請求，支持攔截器，支持回調函數和Promise，

官網推薦request封裝