uniapp 使用axios-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 使用axios。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步：安装axios

npm install axios

注意：如果你的uniapp项目中还没有“package.json”文件，请先初始化项目：

npm init -y

第二步：配置axios请求拦截器

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

第三步：在main.js中做axios适配

解释：为了解决uniapp 适配axios请求，避免报adapter is not a function错误

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);
			}
		})
	})
}

第四步：创建接口配置js文件

import request from '@/utils/request'

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

第五步：调取接口

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




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

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

		}).catch(err => {

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

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

});

到了这里，关于uniapp 使用axios的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！