一、安装依赖包

npm i @escook/request-miniprogram --save

二、封装请求文件

平常vue用的很多,所以基本被vue开发思维固化了

1、建立utils文件夹,并建立request.js文件

// 导入发请求的包,并挂载到uni身上
import {
	$http
} from '@escook/request-miniprogram';
//全局挂载在uniapp
uni.$http = $http;
//请求路径
$http.baseUrl = 'http://192.168.2.23:8252/';
//请求拦截器
$http.beforeRequest = function(config) {
	//携带token
	$http.header["token"] = uni.getStorageSync("token") ? uni.getStorageSync("token") : '';
}
//响应拦截器
$http.afterRequest = function(response) {
	const code = response.data.code;
	switch (code) {
		case 0:
			break;
		case -1:
			uni.showToast({
				title: response.data.msg,
				duration: 2000,
				icon: "none"
			});
			uni.navigateTo({
				url: '../login/login'
			});
			break;
		case 10000:
			uni.showToast({
				title: response.data.msg,
				duration: 2000,
				icon: "none"
			});
			break;
		default:
			uni.showToast({
				title: response.data.msg,
				duration: 2000,
				icon: "none"
			});
			break;
	}

2、main.js引入

import "./utils/request.js"

3、api封装

//api.js文件中
// post请求
export function 函数名 (params,callback){
	uni.$http.post("接口路径",params).then((res)=>{
		callback(res);
	});
}
//get请求
export function 函数名 (params,callback){
	uni.$http.get("接口路径",params).then((res)=>{
		callback(res);
	});
}

4、页面中使用

import {函数名} from "@/api/api.js"
export default {
	********
	methods: {
	const params = {
		"bsPhone": "13000000000"
	}
	uni.setStorageSync("token",'2')
	send_code(params,(res)=>{
		console.log(res);
		});
	}
}

–基本结束–

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐