uniapp+uview封装小程序请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp+uview封装小程序请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提要：

uniapp项目引入uview库此步骤不再阐述

1.创建环境文件

uniapp+uview封装小程序请求,uni-app,前端

env.js：

let BASE_URL;

if (process.env.NODE_ENV === 'development') {
	// 开发环境
	BASE_URL = '请求地址';
} else {
	// 生产环境
	BASE_URL = '请求地址';
}

export default BASE_URL;

2.创建请求文件

uniapp+uview封装小程序请求,uni-app,前端

该封装文件对后端接口返回格式有规范要求

如接口格式跟封装文件不匹配可通过 request.js 中响应拦截进行修改

接口返回格式示例：

{
    code: 200, // 根据code值判断接口状态
    data: {}  // 接口内容
    msg: "success"  // 接口备注
}

request.js：

// 接口共用地址
import BASE_URL from '@/env.js'
var request = function(app) {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		config.baseURL = BASE_URL;
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use(config => {
		config.data = config.data || {}
		// 接口名为login则不携带token
		if(config.url != 'login'){
			config.header['Authorization'] = uni.getStorageSync('token') || ''
		}
		return config

	}, config => {
		// 返回异常承诺对象
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use(response => {
		// uni.hideLoading();
		let data
		switch (response.data.code) {
			case 401 || 402 || 403:
				uni.showModal({
					title: '提示',
					content: response.data.msg,
					showCancel: false, // 隐藏取消按钮
					success: (res) => {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/login'
							})
						}
					}
				})
				break;
			default:
				data = response.data.data;
				break;
		}
		return data;
	}, responseError => {
		// 返回异常承诺对象
		return Promise.reject(responseError)
	})

}

// 导出
module.exports = request;

3.引入请求文件

在根目录main文件内引入

// 引入请求封装
require('@/request/request.js')(app)

4.封装请求文件

uniapp+uview封装小程序请求,uni-app,前端

以为 login.js 为例

该POST登录请求的 login函数名需对应第二步封装文件中的请求不携带token的判断条件文章来源地址https://www.toymoban.com/news/detail-648373.html

// POST
export const login = (data) => {
	return uni.$u.http.post("login", data);
}
// GET
export const userInfo = (data) => {
	return uni.$u.http.get("userInfo", {
		data
	});
}

5.请求示例

import { login, userInfo } from "@/api/login.js"


data(){
    return{
        id:"",
        form: {
			username: '123456',
			password: '123456',
		},
    }
}



methods:{
    // 登录 POST请求
    login(){
        const data = await login(this.form)
        console.log(data)
		if (data.token) {
            // 如果存在Token 则储存到本地
		    uni.setStorageSync('token', data.token);
		}
    }
    // GET请求
    getUserInfo(){
        const data = await login({id: this.id})
        console.log(data)
    }
}

到了这里，关于uniapp+uview封装小程序请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！