当前位置：首页 > news >正文

Vue3+uniapp 封装axios

news 来源：原创 2025/5/14 10:13:24

1.第一步在项目根目录新建utils文件夹，里边新建两个文件request.js和uni-api-promisify.js

2.request.js 代码要安装axios

import axios from 'axios'
import { showToast } from '@/utils/uni-api-promisify'// 创建axios实例
const service = axios.create({baseURL: "https://api.buzznewsfull.com",timeout: 10000,headers: {'Content-Type': 'application/json;charset=utf-8'}
})// 请求拦截器
service.interceptors.request.use(config => {// 在发送请求之前做些什么// 例如添加tokenconst token = uni.getStorageSync('token')if (token) {config.headers['Authorization'] = 'Bearer ' + token}// 显示加载中提示uni.showLoading({title: '加载中...',mask: true})// 打印请求参数到控制台// console.log('请求配置:', config)// console.log('请求URL:', config.url)// console.log('请求方法:', config.method)// 区分显示GET和POST请求的参数if (config.method === 'get') {// console.log('GET请求参数:', config.params)// 打印完整URL，包括查询参数const fullUrl = new URL(config.url, config.baseURL)if (config.params) {Object.entries(config.params).forEach(([key, value]) => {fullUrl.searchParams.append(key, value)})}// console.log('完整请求URL:', fullUrl.href)} else {// console.log('POST请求参数:', config.data)}return config},error => {// 对请求错误做些什么// console.log(error)uni.hideLoading()return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {uni.hideLoading()const res = response.data// 统一处理业务错误if (res.code !== 20000) {// 显示错误信息showToast({title: res.message || '操作失败',icon: 'none'})// 需要登录的状态码const loginRequiredCodes = [50008, 50012, 50014]if (loginRequiredCodes.includes(res.code)) {// 清除本地存储的用户信息uni.removeStorageSync('token')uni.removeStorageSync('userInfo')// 重新登录uni.showModal({title: '登录失效',content: '你已被登出，可以取消继续留在该页面，或者重新登录',confirmText: '重新登录',success: ({ confirm }) => {if (confirm) {uni.reLaunch({url: '/pages/login/login'})}}})}// 返回带有错误信息的对象，而不是直接rejectreturn {success: false,code: res.code,message: res.message || '操作失败'}} else {// 业务成功，返回数据return {success: true,code: res.code,message: res.message || '操作成功',data: res.data}}},error => {console.log('err' + error)uni.hideLoading()let message = '网络请求失败，请稍后重试'if (error.response) {const status = error.response.statusmessage = `请求错误，状态码：${status}`} else if (error.message) {message = error.message}showToast({title: message,icon: 'none'})// 返回错误对象return {success: false,code: -1,message: message}}
)export default service

3.uni-api-promisify.js

export const showToast = (options) => {return new Promise((resolve, reject) => {uni.showToast({...options,success: resolve,fail: reject})})
}export const showModal = (options) => {return new Promise((resolve, reject) => {uni.showModal({...options,success: resolve,fail: reject})})
}// 可以继续添加其他需要Promise化的API

4.根目录新建api文件夹，里边新建user.js 放接口

5.注意get请求参数是params 进行参数拼接，post是data在请求体中

import request from '@/utils/request'/*** 登录* @param {Object} data - 登录数据* @param {string} data.username - 用户名* @param {string} data.password - 密码*/
export function login(data) {return request({url: '/api/user/login',method: 'post',data})
}/*** 获取用户信息*/
export function getInfo(params) {return request({url: '/api/user/info',method: 'get',params})
}/*** 登出*/
export function logout(data) {return request({url: '/api/user/logout',method: 'post',data})
}

6.页面中使用

import { defineStore } from 'pinia'
import { login, getInfo, logout } from '@/api/user'export const useUserStore = defineStore({id: 'user',state: () => ({token: uni.getStorageSync('token') || '',userInfo: JSON.parse(uni.getStorageSync('userInfo') || '{}')}),actions: {// 登录async login(userInfo) {const { username, password } = userInfoconst res = await login({ username: username.trim(), password })if (res.success) {this.token = res.data.tokenuni.setStorageSync('token', res.data.token)await this.getInfo()}return res},// 获取用户信息async getInfo() {const res = await getInfo()if (res.success) {this.userInfo = res.datauni.setStorageSync('userInfo', JSON.stringify(res.data))}return res},// 登出async logout() {const res = await logout()if (res.success || res.code === 50008) {this.token = ''this.userInfo = {}uni.removeStorageSync('token')uni.removeStorageSync('userInfo')}return res}}
})