uni-app中的请求uni.request封装和使用

在使用uniapp开发项目的时候，会经常的使用到request 请求数据接口，如果每次都使用普通的写法去写的，代码肯定会显得非常的臃肿，比例如排查问题，所以今天我们主要来说一下，对uni.request的一些共同参数进行简单的封装，减少重复性数据请求代码。方便全局调用。

首先在项目根目录新建一个http目录或者utils目录，根据自己个人习惯去创建就好

接下来，我们先创建一个operate.js文件，用来放置请求接口 api 地址

export default {
	//接口
	api: function() {
	    let version = wx.getAccountInfoSync().miniProgram.envVersion;
	    switch (version) {
		case "develop": //开发预览版
			return "https://www.baidu.com/"
			break;
		case 'trial': //体验版
			return "https://www.baidu.com/"
			break;
		case 'release': //正式版
			return "https://www.baidu.com/"
			break;
		default: //未知,默认调用正式版
			return "http://www.baidu.com/"
			break;
	}
}

之后再创建 requset.js 用来放置 uni.request 的请求方法，在对其进行简单的封装。

import operate from './operate.js'

export default class Request {
    http(param) {
        // 请求参数
        var url = param.url,
            method = param.method,
            header = {},
            data = param.data || {},
            token = param.token || "",
            hideLoading = param.hideLoading || false;

        //拼接完整请求地址
        var requestUrl = operate.api + url;
       //拼接完整请求地址（根据环境切换）
       // var requestUrl = operate.api() + url;

        //请求方式:GET或POST(POST需配置
        // header: {'content-type' : "application/x-www-form-urlencoded"},)
        if (method) {
            method = method.toUpperCase(); //小写改为大写
            if (method == "POST") {
                header = {
                    'content-type': "application/x-www-form-urlencoded"
                };
            } else {
                header = {
                    'content-type': "application/json"
                };
            }
        }

        //加载圈
        if (!hideLoading) {
            uni.showLoading({
                title: '加载中...'
            });
        }

        // 返回promise
        return new Promise((resolve, reject) => {
            // 请求
            uni.request({
                url: requestUrl,
                data: data,
                method: method,
                header: header,
                success: (res) => {
                    // 判断 请求api 格式是否正确
                    if (res.statusCode && res.statusCode != 200) {
                        uni.showToast({
                            title: "api错误" + res.errMsg,
                            icon: 'none'
                        });
                        return;
                    }
                    // 将结果抛出
                    resolve(res.data)
                },
                //请求失败
                fail: (e) => {
                    uni.showToast({
                        title: "" + e.data.msg,
                        icon: 'none'
                    });
                    resolve(e.data);
                },
                //请求完成
                complete() {
                    //隐藏加载
                    if (!hideLoading) {
                        uni.hideLoading();
                    }
                    resolve();
                    return;
                }
            })
        })
    }
}

使用方法

我们可以继续再http 目录下新建一个名为api.js 的文件，统一管理请求接口，在后续开发中只需要在页面中调用 api.js中请求即可

import Request from './requset.js'
let request = new Request().http

//全局定义请求头
export default {
    // 请求样式
    login: function(data) {
        return request({
            url: "/user/login", //请求头
            method: "POST", //请求方式
            data: data, //请求数据
            //token: '', // 可传  
            //hideLoading: false, //加载样式
        })
    },
}

api.js的调用可以在main.js 中进行全局调用，也可以在需要的页面中调用，可根据实际情况来决定是否全局调用。

一、全局调用（Vue2驱动下的写法）

1. 在main.js 中引入api.js


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

2. 在页面中调用

//不传参数
this.$api.login().then((res) => {
    console.log(res);
})
//传参
this.$api.login({参数}).then((res) => {
    console.log(res);
})

二、页面直接调用

//引入
import api from '@/http/api.js'

//放入生命周期
onLoad() {
    //用户登录
    api.login().then((res) => {
	    console.log(res);
    })
},

我们可以对api.js进行再改造一下

import Request from './requset.js'
let request = new Request().http

export function login(data) {
  return request({
    url: '/user/login',
    method: 'POST',
    data:data
  })
}

页面中使用

import { login } from '@/http/api.js';  //引入需要的api
//发起请求
onLoad() {
    login({参数}).then(data => {
       console.log(data);
    });
}...

以上这篇uni-app中的请求uni.request封装和使用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

uni-app中的请求uni.request封装和使用

使用方法

一、全局调用（Vue2驱动下的写法）

二、页面直接调用

相关推荐

深入理解position sticky 粘性定位

vue3如何解决reactive()响应式对象初始化重新赋值

满屏import优化方案之使用模块重导（Re-export）

微信小程序封装公共弹窗dailog组件-UNIAPP篇

记录几种常用的弹出层动画样式效果

π • 热门