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, // 不支持https
    proxy: {
      '/api': {
        target: 'http://v.juhe.cn',	// 实际请求地址
        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中写入自己拼接好的全长URL
        getTodayThingData () {
          // 上述请求也可以按以下方式完成（可选）
          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 = 'http://v.juhe.cn'

// 这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
// 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的代码作参考
// /* 新增保存检查计划 */
// 保存都是post
apiFun.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>
// 直接import
import apiFun from '../api/api.js'

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