一、封装方法1（_gt和_mt类型）
1.在根路径下新建config基路径文件夹，新建index.js文件用于封装基路径
//在config/index.js
// 请求的基本路径
const baseURL = process.env.NODE_ENV === "development" ?
"http://192.168.1.188:8080"://测试环境(请求接口的代理路径)
"http://zxwyit.cn:8080";//上线环境
export {baseURL}2.在根路径下新建uilt文件夹，新建http.js文件用于封装请求
// 引入基路径
import {
baseURL
} from "@/config/index.js"
const http = uni.$u.http
// 初始化请求配置
http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = baseURL /* 根域名 */
config.header = {//设置请求头类型，这里是form类型，要看接口文档才能确定是什么类型
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
return config
})
// 请求拦截
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
let strUser = uni.getStorageSync("user")//"user"是登入成功后存储的用户信息，存储为了字符串
let objUser = strUser ? JSON.parse(strUser) : {}//判断存不存在user，转为对象形式，否则{}，{}是为了防止空指针
config.header.accessToken = objUser.accessToken;//获取token值
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
// 响应拦截
http.interceptors.response.use((response) => {
/* 对响应成功做点什么 可使用async await 做异步操作*/
let data = response.data//这里做浅解，可以做也可以不做，做了以后请求数据后赋值就少写一个data
const {
errmsg,
errno
} = data;
if (200 !== errno) {
return Promise.reject(data); //返回错误，通过catch来处理错误
}
return data
}, (response) => {
// 对响应错误做点什么 （statusCode !== 200）
return Promise.reject(response)
})
//封装post请求
function post(_gp, _mt, data = {}, params = {}) {
return http.post("/m.api", {
_gp,
_mt,
...data
},{
...params
})
}
//封装get请求
function get(_gp, _mt, params={}) {
return http.post("/m.api", {
_gp,
_mt,
...params
})
}
//暴露封装的函数
export {post,get}使用
在页面文件中
import {post,get} from "@/uilt/http.js"//引入封装的请求方式
//第一个参数是_gt,第二个参数是_mt，第三个参数是需要传递的数据
login(){
let data ={
phone:this.phone
password:this.password
}
post("user", "login", data).then(res => {
console.log(res, "登入成功");
uni.showToast({
icon: "success",
title: res.data.errmsg,
duration: 1000
})
setTimeout(function() {
uni.switchTab({
url: '/pages/index/index'
});
}, 1000);
}).catch(err => {
uni.showToast({
icon: "error",
title: err.errmsg,
duration: 1000
})
})
}4.说明
该请求的封装方式适用于_gt、_mt类型的请求，应该也可以做到其他类型；
注意看代码中的注释
二、封装方法2（常见类型）
在根路径下新建uilt文件夹，新建api.js用于封装请求的路径和新建http.js用于封装请求
在uilt/api.js中
const url = "http://localhost:8086/"//设置基路径（代理路径）
// 登入页面相关的所有接口
//登入
export const loginpath = url + "login"
// 退出登入
export const logoutpath = url + "logOut"
// 注册
export const registerpath = url + "user/register"在uilt/http.js中
// 封装请求
function request(url,method = "get",data = {}) {
return new Promise((resolve, reject) => {
uni.request({
url,
data,
method,
header: {
// 'Accept': '*/*',
// 'Content-Type': 'application/json',//类型
"Authorization": uni.getStorageSync('token')//请求头
},
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err)
}
})
})
}
export {
request
}2.使用
在页面文件中文章来源：https://www.toymoban.com/news/detail-635508.html
<script>
import {request} from '../../utils/http.js'//引入封装请求
import {loginpath,registerpath,orderpath} from '../../utils/api.js'//引入请求路径
export default {
data() {
return {
userName: "admin",
passWord: "123456",
bool: true
}
},
onShow() {
// this.init()
},
methods: {
//登入点击事件
userPath() {
const userName = this.userName
const passWord = encrypt(this.passWord) //加密处理
//第一个参数是请求的路径，第二参数是请求方式，第三个参数是需要传递的数据
request(loginpath, "post", {
userName,
passWord
}).then(res => {
if (200 == res.statusCode) {
uni.setStorageSync('token', res.data.accessToken)
uni.switchTab({
url: '/pages/user/user'
})
} else {
uni.showToast({
title: res.data,
duration: 500
})
}
})
}
}
}
</script>三、不封装请求
说明
注意看代码中的注释；不封装需要使用 uni.request这个API来进行请求文章来源地址https://www.toymoban.com/news/detail-635508.html
// 注册
registerUser(){
let data = {
phone:this.form.phone,
password:this.form.password,
verifyCode:this.verifyCode
}
if(data.password==''||data.verifyCode==''||data.phone==''){
uni.showToast({
icon: "error",
title: "验证码/手机号/密码不能为空",
duration: 1000
})
return
}
uni.request({
url: 'http://192.168.1.188:8080/m.api',//请求路径
data: {//传递的数据
_gp: "user",
_mt: 'register',
...data
},
method: "POST",//请求方式
header: {//请求头配置
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',//设置请求类型，到接口文档中找
"AccessToken":uni.getStorageInfoSync("token")//根据需求是否需要添加token
},
success: (res) => {//请求成功后的回调
let data = res.data
console.log(res, "注册成功");
if (200 === data.errno) {
this.verifyCode = data.data
}else{
uni.showToast({
icon: "error",
title: data.errmsg,
duration: 1000
})
}
},
fail: (err) => {//请求失败后的回调
uni.showToast({
icon: "error",
title: err,
duration: 1000
})
}
})
}到了这里，关于uni-app项目封装http请求和不封装请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
