步骤如下:
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>
调用成功