uniapp微信小程序开发过程中，接口请求需要进行封装，用来进行全局处理。

首先封装文件

首先创建文件request.js，我们引入uview-plus然后进行封装处理，这里接口是以cookies的形式鉴权访问的，所以我们需要对cookies进行接受以及传递。

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
import configs from './config.js'
import {
	http,
	toast
} from 'uview-plus'
export default (vm) => {
	// 初始化请求配置
	http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = configs.baseUrl; /* 根域名 */
		return config
	})

	// 请求拦截
	http.interceptors.request.use((config) => { // 可使用async await 做异步操作

		config.header['Content-Type'] = 'application/json'
		config.data = config.data || {}

		// 根据custom参数中配置的是否需要token，添加对应的请求头
		config.header['cookie'] = uni.getStorageSync('cookie')
		// if (config?.custom?.auth) {
		// 	if (uni.getStorageSync('cookie')) {
		// 		// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
		// 	} else {
		// 		uni.redirectTo({
		// 			url: '/pages/login/wxlogin'
		// 		})
		// 	}
		// }
		return config
	}, config => { // 可使用async await 做异步操作
		return Promise.reject(config)
	})

	// 响应拦截
	http.interceptors.response.use((response) => {
		const data = response.data;
		if (response.header['Set-Cookie']) {
			// 更精确地处理Set-Cookie，考虑cookie值中可能包含逗号的情况
			var cookies = response.header['Set-Cookie'];
			var cookieArray = cookies.split(/;(?=\s*[^\s=]+(?:=[^\s;]*)?\s*$)/);
			var newCookie = cookieArray.join(';');
			uni.setStorageSync('cookie', newCookie);
		}

		if (data.code != 200 && data.code != 514) {
			if (data.message) {
				toast(data.message);
			}

			if (data.code == 401 || data.code == 602) {
				uni.removeStorageSync('userid');
				uni.$u.route('/pages/login/wxlogin');
			}
		}
		return data === undefined ? {} : data;
	}, (response) => {
		if (response.statusCode == 401) {
			uni.$u.route('/pages/login/wxlogin');
		}
		return Promise.reject(response);
	});
}

main.js引入request.js

我们在main.js引入request

import App from './App'
import uviewPlus from "uview-plus";
// 引入请求封装，将app参数传递到配置中
import request from './config/request';
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import "uview-plus/index.scss";
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})

app.$mount()
// #endif
// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App);
	app.use(uviewPlus);
	// 使用request模块
	request(app);
	return {
		app
	}
}
// #endif

我们来处理接口

我们来创建一个api.js文件，将接口请求一一写出。

import {
	http,
	toast
} from 'uview-plus'
var directory = ""
import qs from 'qs'
// 登录

export const aUser = (params, config = {}) => http.post(directory + '/user/aUser', params, config)

// 微信鉴权
export const wxlogin = (params, config = {}) => http.post(directory + '/wx/login', params, config)

进行接口请求

引入接口方法，

	import {
		aUser,
		wxlogin,
		userPhone,
		getInfo
	} from '@/config/api.js'

请求接口

get请求，携带鉴权信息

getuserInfo() {
	var that = this;
	getInfo({}, {
		custom: {
			auth: true
		}
	}).then(res => {
		if (res.code == 200) {
			console.log(res.code)
			this.isLogin = true
			that.data = res.data
			this.nickName = res.data.nickName
			this.phone = res.data.phone
		}
	}).catch(err => {

	})
},

post

post请求携带参数

// 鉴权登录
userPhone() {
	var that = this;
	userPhone({
		"code": "123",
		"phone": "123"
	}).then(res => {
		if (res.code == 200) {
			that.nickName = res.data.nickName
		}
	}).catch(err => {

	})
},