开发笔记，前端http统一处理文件，预处理get、POST的方法，封装获取token 与 报错时处理方案

原版本

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://域名'。

具体解释如下：

1. const config: 使用 const 关键字声明了一个常量 config，意味着 config 的引用在整个代码块内是不可变的。这样做的目的是确保配置信息在程序运行时不被修改。

2. base_url: 'https://域名': 这是 config 对象的一个属性，键名为 base_url，对应的值是一个字符串 'https://域名'。这里的 'https://域名' 是一个占位符，实际使用时应该替换为你的实际域名。

3. 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>