* [baseSite.js](https://www.kancloud.cn/wangking/uniapp/1898426#baseSitejs_1)
* [request.js](https://www.kancloud.cn/wangking/uniapp/1898426#requestjs_17)
* [main.js 中注册该方法](https://www.kancloud.cn/wangking/uniapp/1898426#mainjs__91)
* [客户端调用](https://www.kancloud.cn/wangking/uniapp/1898426#_109)
* [客户端使用 async + await 调用](https://www.kancloud.cn/wangking/uniapp/1898426#_async__await__137)
## 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>
~~~
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图
- uni-app 地图全解析+事件监听