步骤如下：
1、项目下新建common文件夹，再创建request.js文件
2、打开request.js文件，开始写封装的代码
思路很简单
定义域名：baseUrl；
定义方法：api；
通过promise异步请求，最后导出方法。
request.js参考代码如下
// request.js
// 通常可以吧 baseUrl 单独放在一个 js 文件了
const baseUrl = 'http://xxx.xxx.4.xxxx:8093/chemApp'
const request = (options = {}) => {
// 在这里可以对请求头进行一些设置
// 例如：
// options.header = {
// "Content-Type": "application/x-www-form-urlencoded"
// }
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + options.url || '',
method: options.type || 'GET',
data: options.data || {},
header: options.header || {}
}).then(data => {
let [err, res] = data;
resolve(res);
}).catch(error => {
reject(error)
})
});
}
const get = (url, data, options = {}) => {
options.type = 'GET';
options.data = data;
options.url = url;
return request(options)
}
const post = (url, data, options = {}) => {
options.type = 'POST';
options.data = data;
options.url = url;
return request(options)
}
export default {
request,
get,
post
}
3、在main.js全局注册
import Vue from 'vue'
import App from './App'
import request from 'common/request.js'
Vue.prototype.$request = request
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
4、页面调用,发起一个get请求
this.$request.get('/caller/getCallers.action', {
"name": "", // 当前页码
"pageBean.page": 1, // 当前页码
"pageBean.rows": 2, // 每页显示数量
"pageBean.pagination": true
}).then(res => {
console.log(res)
})
页面调用的index.vue
<template>
<view>
<uni-list v-for="(item,index) in productList" :key="index">
<uni-list-item :title="item.author_name" :note="item.title"></uni-list-item>
</uni-list>
</view>
</template>
<script>
import uniList from "@/components/uni-list/uni-list.vue"
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
export default {
components: {
uniList,
uniListItem
},
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
this.$request.get('/caller/getCallers.action', {
// 传参参数名：参数值,如果没有，就不需要传
// "username": "john",
// "key": this.searchValue
}).then(res => {
// 打印调用成功回调
console.log(res)
this.productList = res;
})
},
}
}
</script>
<style>
</style>
调用成功
