uniapp uses axios to make requests and configure interceptors

Step 1: Install axios

npm install axios

Note: If there is no "package.json" file in your uniapp project, please initialize the project first:

npm init -y 

Step 2: Configure the axios request interceptor

request.js

import axios from 'axios'
import errorCode from '@/utils/errorCode'
import {
	tansParams
} from '@/utils/ruoyi'

const server = require('../config/server.config')


axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
	// axios中请求配置有baseURL选项，表示请求URL公共部分
	// baseURL: process.env.VUE_APP_BASE_API,
	baseURL: server.apiUrl,
	// 超时（毫秒）
	timeout: 10000
})

//请求计数
let reqNum = 0
// request拦截器
service.interceptors.request.use(config => {
	console.log("axios请求拦截器")
	// 在请求发出之前进行一些操作，每次发出请求就 reqNum++
	reqNum++
	// 是否需要设置 token
	const isToken = (config.headers || {}).isToken === false
	// 是否需要防止数据重复提交
	const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
	if (!isToken) {
		config.headers['uniapp'] = 'Y ' // 让每个请求携带自定义token 请根据实际情况自行修改
	}
	// get请求映射params参数
	if (config.method === 'get' && config.params) {
		let url = config.url + '?' + tansParams(config.params)
		url = url.slice(0, -1)
		config.params = {}
		config.url = url
	}
	if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
		const requestObj = {
			url: config.url,
			data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
			time: new Date().getTime()
		}

	}
	return config
}, error => {
	console.log(error)
	Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
		console.log("axios响应拦截器")
		// 接受请求后 reqNum--，判断请求所有请求是否完成
		reqNum--
		if (reqNum <= 0) {
			// console.log('请求完毕')
		} else {
			// console.log('接口' + reqNum + '请求中')
		}
		// 未设置状态码则默认成功状态
		const code = res.data.code || 200
		// 获取错误信息
		const msg = errorCode[code] || res.data.msg || errorCode['default']
		// 二进制数据则直接返回
		// if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
		// 	return res.data
		// }
		if (code === 401) {
			return Promise.reject('（401）：请求要求身份验证。对于需要登录的网页，服务器可能返回此响应')
		} else if (code === 500) {
			uni.showToast({
				title: msg,
				duration: 2000
			});

			return Promise.reject(new Error(msg))
		} else if (code !== 200) {
			uni.showToast({
				title: msg,
				duration: 2000
			});

			return Promise.reject('error')
		} else {
			return res.data
		}
	},
	error => {
		console.log('err' + error)
		let {
			message
		} = error
		if (message == 'Network Error') {
			message = '后端接口连接异常'
		} else if (message.includes('timeout')) {
			message = '系统接口请求超时'
		} else if (message.includes('Request failed with status code')) {
			message = '系统接口' + message.substr(message.length - 3) + '异常'
		}


		uni.showModal({
			title: '提示',
			content: message,
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});


		return Promise.reject(error)
	}
)


export default service

Step 3: Configure axios adaptation in main.js

Explanation: In order to solve the uniapp adaptation axios request, avoid reporting adapter is not a function error

import axios from 'axios'



// 解决uniapp 适配axios请求，避免报adapter is not a function错误
axios.defaults.adapter = config => {
	return new Promise((resolve, reject) => {
		let settle = require('axios/lib/core/settle');
		let buildURL = require('axios/lib/helpers/buildURL');
		uni.request({
			method: config.method.toUpperCase(),
			url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
			header: config.headers,
			data: config.data,
			dataType: config.dataType,
			responseType: config.responseType,
			sslVerify: config.sslVerify,
			complete: function complete(response) {
				// console.log("执行完成：", response)
				response = {
					data: response.data,
					status: response.statusCode,
					errMsg: response.errMsg,
					header: response.header,
					config: config
				};
				settle(resolve, reject, response);
			}
		})
	})
}

Step 4: Create an interface configuration js file 

login.js

import request from '@/utils/request'

/**
 * 授权登录
 * @param {*} data 
 */
export function wxLogin(data) {
	return request({
		url: '/wedding/hq-applets-user/wxLogin',
		method: 'post',
		params: {},
		data
	})
}

Step 5: Call the interface

//引入
import { wxLogin } from '@/api/wxLogin.js';




//调用
wxLogin(obj).then(res => {

		console.log('登录结果：', res);

		}).catch(err => {

		console.error('登录结果:', err);

		}).finally(() => {
        console.error('最终回调');

});