1、config.js 在项目根目录创建config/config.js
const config ={
baseURL: 'https://xxx.xxx.com', //接口域名
}
if (process.env.NODE_ENV === 'development') { //开发模式
config.baseURL = "https://chunxiang.yunzanet.com" //接口域名
}
export default config2、在项目根目录创建api目录(根据个人习惯命名),并创建index.js
index.js代码如下
import store from '@/store/index'
import Vue from 'vue';
const globalRequest = (api, method, options) => {
let loadingTimer = null;
const option = {
loading: true, //是否显示loading
delayed: true, //是否延时显示loading
loading_text: 'loading', //是否延时显示loading
params: {}
}
if (options) {
if (options.loading !== undefined) option.loading = options.loading
if (options.delayed !== undefined) option.delayed = options.delayed
if (options.loading_text !== undefined) option.loading_text = options.loading_text
if (options.params !== undefined) option.params = options.params
}
// 判断是不是全域名
let regex = /^http/;
let request_url = Vue.prototype.$config.baseURL + api;
if (regex.test(api)) request_url = api
const headers = {
// "Content-Type": 'application/x-www-form-urlencoded',
"token": uni.getStorageSync('token') || '', //token
}
if (option.loading && !option.delayed) {
// 立即显示loading
store.commit("loadingShow", option.loading_text)
} else if (option.loading && option.delayed) {
// 延时显示loading
loadingTimer = setTimeout(() => {
console.log("显示弹窗");
store.commit("loadingShow", option.loading_text)
}, 1000)
}
return new Promise(function(resolve, reject) {
uni.request({
url: request_url,
method: method,
data: option.params,
dataType: 'json',
withCredenttials: true,
header: headers,
success: function(res) {
clearTimeout(loadingTimer)
store.commit("loadingHide") //隐藏loading
if (res.statusCode == 200) { //浏览器200
switch (res.data.code) {
case 1:
resolve(res.data)
break;
case 200:
resolve(res.data)
break;
case 10001:
store.commit("loginout")
uni.reLaunch({
url: "/pages/login/index"
})
reject(res.data)
break;
case 1003:
store.commit("loginout")
uni.reLaunch({
url: "/pages/login/index"
})
reject(res.data)
break;
case 2005:
store.commit("loginout")
uni.reLaunch({
url: "/pages/login/index"
})
reject(res.data)
break;
default:
reject(res.data) // 返回失败
break;
}
} else if (res.statusCode == 401) {
store.commit("loginout")
uni.reLaunch({
url: "/pages/login/index"
})
reject(res.data)
} else {
reject({ message: '网络错误' }) // 浏览器处理不是200
}
},
fail: (err) => {
clearInterval(loadingTimer)
store.commit("loadingHide") //隐藏loading
if (store.state.network) {
uni.showModal({
content: '请检查网络',
showCancel: false,
});
store.commit('setNetwork', false)
setTimeout(() => {
store.commit('setNetwork', true)
}, 5000)
}
reject({ msg: '网络错误' })
}
})
})
}
const api = {
post: (api_path, options) => globalRequest(api_path, 'POST', options),
get: (api_path, options) => globalRequest(api_path, 'GET', options)
}
export default api3、项目根目录store/index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
import api from "@/api/index.js"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
network: true,
token: uni.getStorageSync('token') || null,
loading: false, //加载框是否正在显示
...
},
mutations: {
setNetwork(state, provider) {
state.network = provider;
},
loadingShow(state, provider) {
if (state.loading === false) {
uni.showLoading({
title: provider
})
state.loading = true
}
},
loadingHide(state) {
setTimeout(function() {
uni.hideLoading();
state.loading = false
}, 500);
},
// 登录
login(state, provider) {
uni.setStorageSync('token', provider);
state.token = provider;
},
//登出
loginout(state) {
uni.$emit('TIMLoginOut') //TIM退出登录
state.user_info = null;
state.token = null;
uni.clearStorageSync()
},
},
})
export default store4、main.js
import App from './App'
import Vue from 'vue'
import store from './store' //引入vuex
import config from './config/config.js'
Vue.prototype.$config = config
import api from './api/index.js'
Vue.prototype.api = api
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
export default app;5、项目中引用 test.vue
<template>
<view class="page-height">
...
</view>
</template>
<script>
export
default {
methods:
{
onLogin() {
const params = {
username: 'xxxxxx',
password: 'xxxxxx'
}
this.api.post("/api/wanlshop/user/login", {
params: params
}).then(res = >{...自己写逻辑
}).
catch(err = >{
this.apiErr(err) //你自己封装全局方法处理报错信息
})
}
}
}
</script>