文章目录
- 1.最终效果预览
- 2.请求封装
- 3.创建config配置文件
- 4.创建api请求
- 5.页面调用
说明：当前笔记基于Vue3开发，HbuilderX版本4.66
1.最终效果预览
2.请求封装
在util/request.js下创建js文件，代码如下
import config from '@/config'const timeout = 60000function tansParams(params) {let result = ''for (const propName of Object.keys(params)) {const value = params[propName]var part = encodeURIComponent(propName) + "="if (value !== null && value !== "" && typeof(value) !== "undefined") {if (typeof value === 'object') {for (const key of Object.keys(value)) {if (value[key] !== null && value[key] !== "" && typeof(value[key]) !== 'undefined') {let params = propName + '[' + key + ']'var subPart = encodeURIComponent(params) + "="result += subPart + encodeURIComponent(value[key]) + "&"}}} else {result += part + encodeURIComponent(value) + "&"}}}return result
}const request = options => {if (options.params) {let url = options.url + '?' + tansParams(options.params)url = url.slice(0, -1)options.url = url}return new Promise((resolve, reject) => {uni.request({method: options.method || 'get',timeout: options.timeout || timeout,url: config.getProUrl() + options.url,data: options.data,header: options.header,dataType: 'json'}).then(response => {resolve(response.data)}).catch(error => {reject(error)})})
}export default request
3.创建config配置文件
在项目的根目录下创建config.js文件并配置基本的请求路径，代码如下
const config = {baseUrl: 'http://xx.xx.xx.xx:xx',proCode: 'pro_api',getProUrl() {return `${this.baseUrl}/${this.proCode}`;}}export default config
如果项目固定就一个固定的url地址可只写baseUrl,我们是很多地市的项目，并且一个项目可能有十几套子项目，因此会用proCode动态配置
4.创建api请求
在common目录下创建xx.js,根据自己模块定义吧，代码如下
import request from '@/util/request'export function getXXListData(query) {return request({url: '/xx/xxx',method: 'get',params: query})
}
5.页面调用
在页面引入xx.js请求中的getXXListData代码如下
import { getXXListData } from '@/common/xx/xx.js'const getList = () => {let obj = {"key1": "value1","key2": "value2"}getXXListData(JSON.stringify(obj)).then(res => {}).catch(err => {})}方法中的参数JSON.stringify(obj)要根据自己的接口灵活变动，目前只封装了这个get请求，post请求类似，项目用到了会补充上
)
