[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> ~~~