Java教程

uniapp封装接口请求api

本文主要是介绍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);
});

 

 

测试成功:

 

 

 

 

 

 

 

 

 

 

 

这篇关于uniapp封装接口请求api的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!