[TOC] ## baseSite.js > 設置請求的服務器域名配置，供request.js使用 ~~~ let baseSite = "" if(process.env.NODE_ENV === 'development'){ // 開發環境 baseSite = 'http://www.test.com' }else{ // 生產環境 baseSite = 'http://www.test.com' } export default baseSite ~~~ ## request.js > 存放路徑 /common/request.js ~~~ import baseSite from './baseSite.js' import util from './util.js' module.exports = { get: function (url, data, options = {}) { return this.request({ url, data, method: 'GET', ...options }); }, post: function (url, data, options = {}) { return this.request({ url, data, method: 'POST', ...options }); }, /** * @Function * @param {Object} options - 請求配置項 * @prop {String} options.url - 請求路徑 * @prop {Object} options.data - 請求參數 * @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 響應的數據類型 * @prop {Object} [options.dataType = config.dataType] - 如果設為 json，會嘗試對返回的數據做一次 JSON.parse * @prop {Object} [options.header = config.header] - 請求header * @prop {Object} [options.method = config.method] - 請求方法 * @returns {Promise<unknown>} */ request:function (options = {}) { options.header = options.header || "application/x-www-form-urlencoded"; options.url = options.url || ''; options.data = options.data || {}; options.method = options.method || 'POST'; // 該方法里進行封裝服務端接口需要的檢驗數據，以及一些常規的流程封裝，如下（根據自己邏輯進行封裝) //options.data.token = 'xxxxx' return new Promise((resolve, reject) => { uni.request({ url: baseSite + options.url, data: options.data, method: options.method, header: { "content-type": options.header, //"token": 'xxxxx', //"timestamp": new Date().getTime(), //"APPUUID": APPUUID }, success: function (result) { let errorcode = result.data.errorcode if (errorcode == 0) { // resolve調用后，即可傳遞到調用方使用then或者async+await同步方式進行處理邏輯 resolve(result.data) }else if(errorcode == 600){ util.showToast('請登錄帳號') util.goLogin() }else{ util.showToast(res.data.message) } }, fail: function (e) { console.log('error in...') // reject調用后，即可傳遞到調用方使用catch或者async+await同步方式進行處理邏輯 reject(e) }, }) }) } } ~~~ ## main.js 中注冊該方法 > 路徑 /main.js ~~~ import Vue from 'vue' import App from './App' import request from './common/request.js' Vue.config.productionTip = false Vue.prototype.$req = request App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ~~~ ## 客戶端調用 ~~~ <template> <view> <button type="default" @tap="dotest">請求數據</button> </view> </template> <script> export default { methods: { dotest: function(e) { this.$req.get(`/wangkun/haha110`, {name: 'wk'}).then(res => { // 獲得數據 console.log('111wangkun test') console.log(res) }).catch(res => { 　　// 失敗進行的操作 console.log('111error test') console.log(res) }) } } } </script> ~~~ ## 客戶端使用 async + await 調用 > 將異步的請求設置為同步方式，得出的結果是 111wangkun test -> 111wangkun test -> 222wangkun test ~~~ <template> <view> <button type="default" @tap="dotest">請求數據</button> </view> </template> <script> export default { methods: { dotest: async function(e) { await this.$req.get(`/wangkun/haha110`, {name: 'wk'}).then(res => { // 獲得數據 console.log('111wangkun test') console.log(res) }).catch(res => { 　　// 失敗進行的操作 console.log('111error test') console.log(res) }) let res1 = await this.$req.get(`/wangkun/haha110`, {name: 'wk'}).then(res => { // 獲得數據 console.log('111wangkun test') return res }).catch(res => { 　　// 失敗進行的操作 console.log('111error test') console.log(res) }) console.log(res1) let res2 = await this.$req.post(`/wangkun/haha110`, {name: 'wk'}).then(res => { // 獲得數據 console.log('222wangkun test') }).catch(res => { 　　// 失敗進行的操作 console.log('222error test') console.log(res) }) console.log(res2) /* let res = await this.$http.get(`/wangkun/haha110`, {name: 'wk'}, {'namex':'123', 'con':'12345'}); console.log('todo1...') console.log(res) console.log('todo2...') */ } } } </script> ~~~