uniapp封装request请求

简介: uniapp封装request请求

步骤如下:

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>

调用成功

相关文章
|
2月前
uniApp常用功能封装
uniApp常用功能封装
32 0
|
2月前
|
移动开发 前端开发 JavaScript
uniapp中IO模块(管理本地文件系统)的常用功能封装
uniapp中IO模块(管理本地文件系统)的常用功能封装
124 1
|
2月前
|
SQL 开发框架 数据库连接
uniapp中sqlite数据库常用操作的简单封装
uniapp中sqlite数据库常用操作的简单封装
|
2月前
|
API
uniApp封装请求
uniApp封装请求
25 0
|
2月前
|
前端开发
uniapp如何封装接口
uniapp如何封装接口
68 0
|
2月前
|
前端开发 JavaScript 小程序
【uniapp】十分钟带你封装uniapp的api请求
【uniapp】十分钟带你封装uniapp的api请求
218 0
|
12天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的外卖程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的外卖程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
12天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校订餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校订餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
7天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
22 6
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的食品安全信息管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的食品安全信息管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
19 2