• uniapp封装接口请求api


    借鉴博客:https://blog.csdn.net/weixin_54882119/article/details/115979162

    1、在项目下建一个api目录,目录里建一个api.js文件,内容如下:

    const token = '';
    
    const apiUrl = 'http://xxx/api/';
    
    const baseRequest = (url, method, params) => {
        return new Promise((resolve, reject) => {
            uni.request({
                url: apiUrl+url,//测试接口
                method: method,
                data: params,
                header: {
                    'token': token
                }
    
            }).then((response)=>{
                let [error, res] = response;
                resolve(res.data);
            }).catch(error => {
                //弹出消息提示
                uni.showToast({
                    // icon: 'success', //最多显示7个汉字长度
                    icon: 'none', //不显示图标,最多显示2行
                    title: '服务器错误!',
                    duration: 2000
                })
                
                let [err, res] = error;
                reject(err);
            });
        })
    };
    
    export default{
        baseRequest
    }

    2、在main.js中配置vue全局属性,以便调用api.js文件中的baseRequest方法,代码:

    import api from './api/api.js'
    Vue.prototype.$api = api

    3、直接在要用到的组件页面调用,调用代码如下:

    this.$api.baseRequest('loginController/login', 'POST', {}).then(res=>{
        console.log("测试封装请求api成功,返回结果:" + res.message);
    }).catch(error=>{
        console.log(error);
    });

    测试成功:

  • 相关阅读:
    Netty Nio启动全流程
    线性表
    java stream 原理
    SpringBoot 分布式session
    mockito
    RxJava
    HandlerMapping 详解
    SpringMVC 架构
    Spring Cloud 配置服务
    SpringBoot常用配置简介
  • 原文地址:https://www.cnblogs.com/spll/p/15978643.html
Copyright © 2020-2023  润新知