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);
});

 

 

测试成功：

 

 

 

 

 

 

 

 

 

 

 

。