• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

uni-app api请求接口 封装

武飞扬头像
anne都
帮助1

1,写一个公共的api.js

let baseURL = 'http://443548ef.cpolar.cn/';//公共api地址。示范
export const myRequest = (options) => {
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL   options.url, //接口地址:前缀 方法中传入的地址
			method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
			dataType:options.dataType || "json",
			header: {
			   'Admin-Token':uni.getStorageSync('Admin-Token'), //自定义请求头信息
			   'visa':uni.getStorageSync('userId'), //自定义请求头信息
			   'content-type':options.headers['Content-Type'] || 'application/x-www-form-urlencoded;charset=UTF-8'
			},
			success: (res) => {
				if(res.data.code == 302){//用户另一端登录
					uni.showModal({
						title: '提示',
						content: res.data.msg,
						showCancel: false, 
						success: function (res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/login'
								});
							} 
						}
					});
				}else if(res.data.code == 500){
					 uni.showToast({
						title: res.data.msg,
						icon: 'none',
						mask: true,
						duration: 2000
					 });
				}else{
					uni.showToast({
						title: res.data.code,
						icon: 'none',
						mask: true,
						duration: 2000
					});
					resolve(res.data);
				}
				//返回的数据(不固定,看后端接口,这里是做了一个判断,如果不为true,用uni.showToast方法提示获取数据失败)
				// if (res.data.success != true) {
				// 	return uni.showToast({
				// 		title: '获取数据失败',
				// 		icon: 'none'
				// 	})
				// }
				// 如果不满足上述判断就输出数据
				
			},
			// 这里的接口请求,如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log( baseURL   options.url)
				console.log(err)
				reject(err)
			}
		})
	})
}
学新通

2,接下来一些请求方法封装,以登录为例。login.js

import {myRequest} from 'api.js'
//登录
export function login(username, password) {
  return myRequest({
    url: 'login',
    method: 'post',
    data: {
      username,
      password
    },
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'  
	}
  })
}

3,login.vue 点击发送请求

import {login} from '@/api/login.js';

loginHandle(){
				login(this.username,this.password).then(res => {
									const code = res.code;
									if (code == 0) {
										uni.showToast({
											title: '登录成功'
										})
									
										setTimeout(() => {
										      uni.redirectTo({
										          url: '/pages/index/index',
												  })
										  }, 500)
									} else {
										uni.showToast({
											title:res.msg,
											icon: 'none',
											mask: true,
											duration: 2000
										})
										
									}
								}).catch(err => {
									console.log(err)
								})
			},
学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgcaaii
系列文章
更多 icon
同类精品
更多 icon
继续加载