uniapp请求接口封装

小羊要吃狼

安装

[HTML] 纯文本查看 复制代码

npm install qs // 用来序列化post类型的数据

引入

[HTML] 纯文本查看 复制代码

import baseUrl from '../baseUrl'; // url地址信息import qs from 'qs' // 处理data

环境切换

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

uniapp有自己的生产和开发环境，也可以配置其他的环境；大家可以去观看官方文档

开发环境和生产环境

[HTML] 纯文本查看 复制代码

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

post请求头的设置

post请求的时候，需要添加一些请求头；一般默认的请求头是：‘
application/x-www-form-urlencoded ’

[HTML] 纯文本查看 复制代码

header = {    'Content-Type': 'application/x-www-form-urlencoded',}

响应数据

当请求参数返回的时候；查看code数据，给出响应

[JavaScript] 纯文本查看 复制代码

switch (dataType.code * 1) { // 拦截返回参数
        case 0:
        resolve(dataType)
        break;
        case 1003:
                uni.showModal({
                title: '登录已过期',
                content: '很抱歉，登录已过期，请重新登录',
                confirmText: '重新登录',
                success: function(res) {
                        if (res.confirm) { // 点击确定
                        //去登录页面
                        console.log('用户');
                        uni.navigateTo({
                            // 切记这儿需要哈pages.json保持一致；不能有.vue后缀
                            url: '/pages/views/login/index'
                        });
                        } else if (res.cancel) {
                        console.log('用户点击取消');
                        }
                        }
                })
                    break;
        case -1:
            uni.showModal({
                        title: '请求数据失败',
                        content: '获取数据失败！',
                        confirmText: '确定',
                        showCancel: false,
                    success: function(res) {
                    if (res.confirm) {} else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
        })
        break
}

完整版

[HTML] 纯文本查看 复制代码

import baseUrl from '../baseUrl';
import qs from 'qs' // 处理data
const request = (params) => {
        /*
         * 1.初始化值
         */
        let _self = this;
        let url = params.url;
        let method = params.method || 'GET';
        let data = params.data || {};
        data.token = "default-access_token" // default-access_token
        /*
         *2.判断token
         */
        if (!params.token) { // 如果没有传递token
                let token = uni.getStorageSync('token'); // 在本地查找
                if (!token) { // 如果本地没有就跳转到登录页面
                        uni.navigateTo({
                                url: 'pages/views/login/index'
                        });
                } else {
                        data.token = '179509245-9c91827e0224bdc18d0b118b8be1b5af';
                }
        }
        /*
         * 3.添加头部
         */
        let defaultOpot = {
                // 'Content-Type': 'application/x-www-form-urlencoded',
                'Terminal-Type': 'innerH5',
                'Content-Type': 'application/json;charset=UTF-8',
        }
        /*
         * 4.处理 POST
         */
        let header = {}
        method = method.toUpperCase()
        if (method == 'POST') {
                header = {
                        'Content-Type': 'application/x-www-form-urlencoded',
                }
                data = qs.stringify(data)
        }
        // 5.请求地址
        const requestUrl = baseUrl.server + url;
        uni.showLoading({
                title: '加载中...'
        });
        // 6.用 Promise 创建回调
        return new Promise((resolve, reject) => {
                uni.request({
                                url: requestUrl,
                                method: method,
                                header: Object.assign({}, defaultOpot, header),
                                data: data,
                                dataType: 'json',
                        })
                        .then(res => { // 成功
                                if (res[1] && res[1].statusCode === 200) {
                                        let {
                                                data: dataType
                                        } = res[1]
                                        switch (dataType.code * 1) { // 拦截返回参数
                                                case 0:
                                                        resolve(dataType)
                                                        break;
                                                case 1003:
                                                        uni.showModal({
                                                                title: '登录已过期',
                                                                content: '很抱歉，登录已过期，请重新登录',
                                                                confirmText: '重新登录',
                                                                success: function(res) {
                                                                        if (res.confirm) { // 点击确定
                                                                                //去登录页面
                                                                                console.log('用户');
                                                                                uni.navigateTo({
                                                                                        // 切记这儿需要哈pages.json保持一致；不能有.vue后缀
                                                                                        url: '/pages/views/login/index'
                                                                                });
                                                                        } else if (res.cancel) {
                                                                                console.log('用户点击取消');
                                                                        }
                                                                }
                                                        })
                                                        break;
                                                case -1:
                                                        uni.showModal({
                                                                title: '请求数据失败',
                                                                content: '获取数据失败！',
                                                                confirmText: '确定',
                                                                showCancel: false,
                                                                success: function(res) {
                                                                        if (res.confirm) {} else if (res.cancel) {
                                                                                console.log('用户点击取消');
                                                                        }
                                                                }
                                                        })
                                                        break
                                        }
                                }
                        })
                        .catch(err => { // 错误
                                reject(err)
                        })
                        .finally(() => {
                                console.log('不管是否成功都要执行')
                                uni.hideLoading();
                        })
        })
}
export default request

在api中封装接口

[HTML] 纯文本查看 复制代码

import request from '../../utils/request.js'

/*
* 1.获取商城楼层列表
*/
export function getFloorList(){
        return request({
                url:'/***',
                method:'get'
        })
}

export function getCartProducts(){
        return request({
                url:'/***',
                method:'POST'
        })
}

在组件中使用引入

[HTML] 纯文本查看 复制代码

import {getFloorList,getCartProducts} from '../../api/mall/index.js';

使用

[HTML] 纯文本查看 复制代码

getFloorList().then(res=>{
        this.list = res.data
})