第一步：在你的根文件下创建一个 request 的目录；然后在request文件下创建两个api.js和index.js
第二步封装接口：index .js中：（''https://xxxxx.xxxxx.cn''，改成自己的）
// 全局请求封装
const base_url = 'https://xxxxx.xxxxx.cn'
// 请求超出时间
const timeout = 5000
// 需要修改token，和根据实际修改请求头
export default (params) => {
let url = params.url;
let method = params.method || "get";
let data = params.data || {};
let header = {
'Blade-Auth': uni.getStorageSync('token') || '',
'Content-Type': 'application/json;charset=UTF-8',
'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
'Tenant-Id': uni.getStorageSync('tenantId') || 'xxx', // avue配置相关
...params.header
}
if (method == "post") {
header = {
'Content-Type': 'application/json'
};
}
return new Promise((resolve, reject) => {
uni.request({
url: base_url + url,
method: method,
header: header,
data: data,
timeout,
success(response) {
const res = response
// 根据返回的状态码做出对应的操作
//获取成功
// console.log(res.statusCode);
if (res.statusCode == 200) {
resolve(res.data);
} else {
uni.clearStorageSync()
switch (res.statusCode) {
case 401:
uni.showModal({
title: "提示",
content: "请登录",
showCancel: false,
success() {
setTimeout(() => {
uni.navigateTo({
url: "/pages/login/index",
})
}, 1000);
},
});
break;
case 404:
uni.showToast({
title: '请求地址不存在...',
duration: 2000,
})
break;
default:
uni.showToast({
title: '请重试...',
duration: 2000,
})
break;
}
}
},
fail(err) {
console.log(err)
if (err.errMsg.indexOf('request:fail') !== -1) {
uni.showToast({
title: '网络异常',
icon: "error",
duration: 2000
})
} else {
uni.showToast({
title: '未知异常',
duration: 2000
})
}
reject(err);
},
complete() {
// 不管成功还是失败都会执行
uni.hideLoading();
uni.hideToast();
}
});
}).catch(() => {});
};api.js中：（这两个是我自己的接口封装示例，改成自己的）
// 引入 request 文件
import request from './index.js'
// 获取学习列表详细信息登录
export const getLogin = ({ iphone, pwd }) => {
return request({
url: `/index.php/index/User/webLogin`,
method: 'post',
data: {
iphone,
pwd
}
});
};
// web用户的注册和修改接口
export const getZhuCe = ({ iphone, pwd ,webname}) => {
return request({
url: `/index.php/index/User/addWebuser`,
method: 'post',
data: {
iphone,
pwd,
webname
}
});
};
以下是我在页面中使用接口的示例代码
这是第一个接口里的使用实例代码：
<template>
<view class="">
<image class="images" src="https://img.zcool.cn/community/013b625c91fd55a8012141680487b8.gif" mode=""></image>
<text class="text1">欢迎登录</text>
<view class="viewOne">
<image class="imageOne" src="../../static/BAvSeQLYg2ABWvaG3hAUBtUDc0ERjQ0IWp7bE6z4BfJAkiX0uDyl0AAAAASUVORK5CYII=.png" mode=""></image>
<input class="itpOne" placeholder="请输入手机号" type="text" v-model="phoneNumber">
</view>
<view class="viewTwo">
<image class="imageOne" src="../../static/AX30tZW6dLuCtAAAAAElFTkSuQmCC.png" mode=""></image>
<input class="itpOne" placeholder="请输入密码" type="text" v-model="password">
</view>
<button class="buttonss" @click="btn()">登 录</button>
<view class="viewThree">
<label>
<checkbox /><text></text>
</label>
我已阅读并同意<text class="text2">使用条款、隐私政策</text>和<text class="text2">使用规范</text>
</view>
<navigator url="/pages/ZhuCe/ZhuCe" class="viewFour">没有账号?去注册</navigator>
</view>
</template>
<script>
import { getLogin } from '@/request/api.js';
export default {
data() {
return {
phoneNumber: '',
password: ''
};
},
methods: {
btn() {
uni.showLoading({
title: '登录中...',
mask: true
});
getLogin({ iphone: this.phoneNumber, pwd: this.password })
.then(res => {
uni.hideLoading();
// console.log('Response:', res);
let isLoginSuccess = false;
if ('webid' in res.data) {
isLoginSuccess = true;
}
if (isLoginSuccess) {
console.log('登录成功:', res.data);
uni.reLaunch({
url: '/pages/index/index'
});
} else {
console.error('登录失败，服务器返回:', res.data);
uni.showToast({
title: res.data.webusername + '，登录失败',
icon: 'none'
});
}
})
.catch(err => {
uni.hideLoading();
uni.showToast({
title: '网络错误，请检查您的网络设置',
icon: 'none'
});
});
}
},
mounted() {
// 页面加载时的初始化代码
}
};
</script>这是第二个接口里的使用实例代码：
<template>
<view class="">
<image class="images" src="https://img.zcool.cn/community/01e8985ef31d5ea8012066212846ed.gif" mode=""></image>
<text class="text1">欢迎注册</text>
<view class="viewOne">
<image class="imageOne" src="/static/9hHG6FQ4vmAAAAAElFTkSuQmCC.png" mode=""></image>
<input class="itpOne" placeholder="请输入用户名" type="text" v-model="webname">
</view>
<view class="viewTwo">
<image class="imageOne" src="../../static/BAvSeQLYg2ABWvaG3hAUBtUDc0ERjQ0IWp7bE6z4BfJAkiX0uDyl0AAAAASUVORK5CYII=.png" mode=""></image>
<input class="itpOne" placeholder="请输入手机号" type="text" v-model="iphone">
</view>
<view class="viewTwo">
<image class="imageOne" src="../../static/AX30tZW6dLuCtAAAAAElFTkSuQmCC.png" mode=""></image>
<input class="itpOne" placeholder="请输入密码" type="text" v-model="pwd">
</view>
<button class="buttonss" @click="zhuce">注 册</button>
<view class="viewThree">
<label>
<checkbox /><text></text>
</label>
我已阅读并同意<text class="text2">使用条款、隐私政策</text>和<text class="text2">使用规范</text>
</view>
<navigator url="/pages/ShouYe/ShouYe" class="viewFour">已有账号?去登录</navigator>
</view>
</template>
<script>
import { getZhuCe } from '@/request/api.js';
export default{
data(){
return{
webname: '',
iphone: '',
pwd: ''
}
},
methods:{
zhuce() {
getZhuCe({ iphone: this.iphone, pwd: this.pwd, webname: this.webname })
.then(res => {
if (res.data.code === 0) {
uni.showToast({
title: '注册成功',
icon: 'success'
});
// 注册成功后，可以选择跳转到登录页面或首页
uni.switchTab({
url: '/pages/ShouYe/ShouYe'
});
}
})
.catch(err => {
uni.showToast({
title: '网络错误，请检查您的网络设置',
icon: 'none'
});
});
}
}
}
</script>
