原版本
http.js
import {
config
} from "./config.js";
const handleGetParams = data => {
var str = "";
for (var i in data) {
str += i + "=" + data[i] + "&";
}
str = str.length > 0 ? str.substring(0, str.length - 1) : "";
return encodeURI(str);
};
export const apiRequest = prams => {
//prams 为我们需要调用的接口API的参数 下面会贴具体代码
let page = getCurrentPages()[getCurrentPages().length - 1].$vm
// 判断请求类型
let headerData = {
"content-type": "application/json",
};
let dataObj = null;
let getParam = "";
//因为我们的GET和POST请求结构不同这里我们做处理,大家根据自己后台接口所需结构灵活做调整吧
if (prams.method === "GET") {
headerData = {
token: uni.getStorageSync("newtoken"),
};
//这里处理一下get的参数
getParam = handleGetParams(prams.query);
} else {
headerData = {
token: uni.getStorageSync("newtoken"),
};
dataObj = prams.query;
}
let getwhat = ''
if (getParam) {
getwhat = "?"
}
return new Promise((resolve, reject) => {
let url =
prams.method === "GET" ? config.base_url + prams.url + getwhat + getParam : config.base_url +
prams.url; //请求的网络地址和局地的api地址组合
// console.log('Promise')
return uni.request({
url: url,
data: dataObj,
method: prams.method,
header: headerData,
timeout: 86400000,
success: res => {
// console.log('res',res)
if (res.data == '[token-err]') {
// uni.navigateTo({
// url: '/pages/home/home'
// })
uni.switchTab({
url: '/pages/home/home'
});
}
// console.log(res.data)
resolve(res.data);
},
fail: err => {
console.log(err);
reject(err);
uni.hideLoading();
},
complete: () => {
uni.hideLoading();
}
});
});
};
简化优化版 http.js
import { config } from "./config.js";
const handleGetParams = (data) => {
const queryString = Object.entries(data)
.map(([key, value]) => `${key}=${value}`)
.join("&");
return encodeURI(queryString);
};
export const apiRequest = (params) => {
const currentPage = getCurrentPages()[getCurrentPages().length - 1].$vm;
const isGetRequest = params.method === "GET";
let headerData = {
"content-type": "application/json",
token: uni.getStorageSync("newtoken"),
};
let requestData = null;
let queryParams = "";
if (isGetRequest) {
queryParams = handleGetParams(params.query);
} else {
requestData = params.query;
}
const url =
config.base_url + params.url + (isGetRequest ? "?" + queryParams : "");
return new Promise((resolve, reject) => {
uni.request({
url,
data: requestData,
method: params.method,
header: headerData,
timeout: 86400000,
success: (res) => {
if (res.data === "[token-err]") {
uni.switchTab({
url: "/pages/home/home",
});
}
resolve(res.data);
},
fail: (err) => {
console.log(err);
reject(err);
},
complete: () => {
uni.hideLoading();
},
});
});
};
http.js 代码解释:
这个代码是一个用于发起 HTTP 请求的模块,其中包括 GET 和 POST 请求的处理
导入配置: 通过 import { config } from “./config.js”; 导入配置信息,使代码更模块化。
处理 GET 请求参数: 使用 handleGetParams 函数来构建 GET 请求的参数字符串,通过将参数对象转化为键值对的形式,并使用 join 连接,最终得到符合 URL 格式的字符串。
统一请求头设置: 对于 GET 和 POST 请求,使用相同的请求头设置,减少冗余代码,提高可维护性。
请求数据处理: 使用 requestData 和 queryParams 来分别表示 POST 请求的数据和 GET 请求的查询参数。
URL 构建: 使用模板字符串(template literals)来构建请求的 URL,使代码更易读。
Promise 封装: 使用 Promise 对象来封装异步操作,以更清晰地处理成功、失败、和完成时的逻辑。
错误处理: 在请求成功后,通过判断返回的数据是否为 “[token-err]”,来决定是否跳转到首页。这样可以处理特定的错误情况。
隐藏加载提示: 在请求完成后,无论成功或失败,都会调用 uni.hideLoading() 来隐藏加载提示。
api_url.js
import {
apiRequest
} from './http.js'
export const autologin = (query) => {
return apiRequest({
url: 'api/autologin',
method: 'GET',
query: query
})
}
export const postfile = (query) => {
return apiRequest({
url: 'api/postfile',
method: 'POST',
query: query
})
}
api_url.js 代码解释:
这段代码是在使用之前定义的 apiRequest 函数(来自 ‘./http.js’)的基础上,创建了两个具体的 API 请求函数:recommandapi 和 faxiaoxi。
recommandapi 函数:
通过 apiRequest 函数发起一个 GET 请求。
请求的 URL 是 ‘api/player/recommend’。
使用了传入的 query 参数作为请求的查询参数。
faxiaoxi 函数:
通过 apiRequest 函数发起一个 POST 请求。
请求的 URL 是 ‘api/socket/chat’。
使用了传入的 query 参数作为请求的数据体(body)。
这种结构的好处是,通过创建这样的封装函数,你可以更容易地调用不同的 API,只需提供相应的参数。这使得代码更模块化,降低了重复代码的使用。同时,通过使用统一的 apiRequest 函数,你可以在一个地方集中处理 HTTP 请求的逻辑,包括请求头、错误处理等,提高了代码的维护性。
config.js
// 域名根据后端进行修改
const config = {
base_url: 'https://域名',
// base_url: '',
}
export {
config
}
config.js 代码解释
这段代码定义了一个 JavaScript 对象 config
,其中包含一个属性 base_url
,其值是一个字符串 'https://域名'
。
具体解释如下:
-
const config
: 使用const
关键字声明了一个常量config
,意味着config
的引用在整个代码块内是不可变的。这样做的目的是确保配置信息在程序运行时不被修改。 -
base_url: 'https://域名'
: 这是config
对象的一个属性,键名为base_url
,对应的值是一个字符串'https://域名'
。这里的'https://域名'
是一个占位符,实际使用时应该替换为你的实际域名。 -
export { config }
: 使用export
将config
对象导出,使得其他模块可以引入并使用这个配置对象。这样,其他模块可以通过import { config } from '路径'
的方式获取配置信息。
综合起来,这段代码的作用是提供一个配置对象,其中包含了一个基础 URL(base_url
),用于构建网络请求的完整 URL。
实际代码应用:
<script>
import {autologin} from '@/api/http.js'
methods: {
async getnewtoken() {
const reg = await autologin({
invitationCode: lo_code,
bindCode: bindCode
})
//直接使用 reg反回结果 就很方便
if (reg.token) {
// 获得token 保存到本地
uni.setStorageSync("newtoken", reg.token)
}
}
}
</script>