vite+vue项目使用axios封装请求接口

想要了解的请转：axios官网链接

项目的创建：使用Vite+Vue3的简单项目搭建

安装

在项目根目录下命令行执行以下命令

npm install axios

我使用的API接口（免费的）是聚合数据的，他家可以使用三个免费的API，就是一天一个三十次，用于调试够了，如果是自己开发后端就用自己开发的那个，不过一般情况下都需要进行跨域的处理

配置跨域

配置vite.config.js文件

import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import eslintPlugin from 'vite-plugin-eslint'// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),// 检查代码格式eslintPlugin({include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']})],server: {// 默认打开的端口和本地// host: '0.0.0.0',// port: 8080,https: false, // 不支持httpsproxy: {'/api': {target: '',// 实际请求地址changeOrigin: true, // 是否跨域rewrite: (path) => path.replace(/^\/api/, '') // 对什么类的服务器匹配},}}})

vue中使用

最简单的样例,url的位置拼写全部的路径，需要自己手拼

axios.get('/api/todayOnhistory/queryEvent.php?key=yourkey&date=7/11').then((res) => {console.log(res)// 服务器返回数据时调用回调函数，res 是服务器返回的数据})

把data发送的数据单独拿出来

axios.get('/api/todayOnhistory/queryEvent.php', {params: {key: '7948a9a811daf33c96aa2af8237de241',date: '7/11'}}).then(function (res) {// 处理成功情况console.log(res)}).catch(function (error) {// 处理错误情况console.log(error)}).then(function () {// 总是会执行})

vue页面的使用

import axios from 'axios'</script>export default {methods: {// 初始用法，get中写入自己拼接好的全长URLgetTodayThingData () {// 上述请求也可以按以下方式完成（可选）axios.get('/api/todayOnhistory/queryEvent.php', {params: {key: '7948a9a811daf33c96aa2af8237de241',date: '7/11'}}).then(function (res) {// 处理成功情况console.log(res)}).catch(function (error) {// 处理错误情况console.log(error)}).then(function () {// 总是会执行})// axios.get('/api/todayOnhistory/queryEvent.php?key=yourkey&date=7/11')// .then((res) => {//console.log(res)//// 服务器返回数据时调用回调函数，res 是服务器返回的数据// })}},mounted () {// Echarts的操作const chart = echarts.init(document.getElementById('sector'))chart.setOption(this.option)window.addEventListener('resize', function () {chart.resize() })this.getTodayThingData()}}</script>

封装

一般来说我们不会把URL直接写在vue页面中，所以就要封装

1、在src文件夹下新建文件夹utils，该文件夹下创建request.js文件

import axios from 'axios' // 引入import {getToken } from '@/utils/token'import {Toast } from 'vant'// let baseURL = ''// 这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行// if(process.env.NODE_ENV=='development'){// baseURL=''// }else{// baseURL=''// }const config = {// baseURL: baseURL,// 因为跨域了，所以这里如果写的话会自动拼接，会有两份，所以隐藏了timeout: 30000 // 设置最大请求时间}const _axios = axios.create(config)// /* 请求拦截器（请求之前的操作） */_axios.interceptors.request.use(config => {// 如果有需要在这里开启请求时的loading动画效果// config.headers.Authorization = getToken //添加token,需要结合自己的实际情况添加，return config},err => Promise.reject(err))// /* 请求之后的操作 */_axios.interceptors.response.use((res) => {console.log(res)// 在这里关闭请求时的loading动画效果// 这里用于处理返回的结果，比如如果是返回401无权限，可能会是跳回到登录页的操作，结合自己的业务逻辑写// 一定结合自己的后端的返回代码进行操作// if (res.data.code === 401) {// console.log('无权限操作')// }return res},err => {if (err) {// 在这里关闭请求时的loading动画效果console.log('请求网络失败')}return Promise.reject(err)})// 封装post,get方法// 按理来说应该也可以封装其他的方法const http = {get (url = '', params = {}) {return new Promise((resolve, reject) => {_axios({url,params,headers: {'Content-Type': 'application/jsoncharset=UTF-8' },method: 'GET'}).then(res => {resolve(res.data)return res}).catch(error => {reject(error)})})},post (url = '', params = {}) {return new Promise((resolve, reject) => {_axios({url,data: params,headers: {'Content-Type': 'application/jsoncharset=UTF-8' },method: 'POST'}).then(res => {resolve(res.data)return res}).catch(error => {reject(error)})})}}// 暴露所写的内容export default http

这个我用的是别人的代码，参考：vue封装axios-很实用，很详细

2、继续在src下新建文件夹api，在api文件夹中新建api.js

这个文件主要是存放各种请求，比如登录模块可以用另一个.js文件；这样功能就会更清晰，便于维护，而且路径就不用写在vue页面中了，根据命名进行调用即可

// 封装一些用的API，不用把URL写在页面中，直接调用即可import http from '../utils/request.js'// 设置个对象，就不用一个个暴露了，直接暴露对象// 在页面引用的时候就可以用apiFun.方法的方式const apiFun = {}// /* 获取列表 */// //查询列表，详情就是get// 这里使用的是万年历，依旧是聚合数据的接口// /api就是跨域位置配置的apiFun.getlist = function (params) {return http.get('/api/calendar/day', params)}// Copy的代码作参考// /* 新增保存检查计划 */// 保存都是postapiFun.saveJcInfo = function (params) {return http.post('/api/saveJcInfo', params)}// 暴露出这个对象export default apiFun

3、可以选择挂在全局还是直接要使用的页面调用

全局

import apiFun from "../api/api.js"Vue.prototype.$apiFun = apiFun // 请求接口api

页面使用

<script>// 直接importimport apiFun from '../api/api.js'export default {methods: {getTodayThingData () {// 需要传入的参数const data = {key: 'yourkey',date: '-1-7'}// 调用apiFun.getlist(data).then((res) => {// 无论失败与否都直接输出结果console.log(res)})}},mounted () {this.getTodayThingData()}}</script>

如果觉得《5 vue3项目axios请求网络接口封装》对你有帮助，请点赞、收藏，并留下你的观点哦！