axios 统一配置与使用 vue2（两种使用方法）与vue3

准备工作

准备一个vue脚手架项目 vue2 和 vue3都可以

1.安装axios

npm install axios

链接: axios中文文档

2.项目新建目录和js文件

这个名字的随意取 一般来说一个是用来定义axios实例的 另一个文件封装请求方法或者请求地址

2.1 serve.js文件

废话不说 解释放注释了

import axios from "axios";
//创建一个axios实例
const serve = axios.create({
    //超时时间
    timeout:20000,
    //请求基本地址 每次请求前会自动加上此前缀 例如 'http://loaclhost:8080/api' 此处是设置了代理
    baseURL:'apis',
    headers: {
        'x-Request-with': 'XMLHttpRequest' //x-requested-with 请求头 区分ajax请求还是普通请求
    },
    withCredentials: true /*是否必须携带XMLHttpRequest 的 withCredentials 属性默认值为false。在获取同域资源时设置 withCredentials 没有影响。true：在跨域请求时，会携带用户凭证*/
})

//请求拦截器 在每次发起axios请求之前对我们的请求做一些设置 最常见的设置 请求头是否携带token 等
serve.interceptors.request.use(config => {
        let token =  window.localStorage.getItem('token')
       if(token){
            config.headers.common['X-User-Token'] = 'RgU1rBKtLym/MhhYIXs42WNoqLyZeXY3EkAcDNrcfKkzj8ILIsAP1Hx0NGhdOO1I';
        }
        return config
    },
    //对请求错误做点什么
    error => {
        return Promise.reject(error)
    })

//响应拦截器 指的是每次请求回来之后 对服务器响应的响应体做出处理
serve.interceptors.response.use(res => {
		// 2xx 范围内的状态码都会触发该函数。
  		// 对响应数据做点什么
        return res.data
    }
   	 // 超出 2xx 范围的状态码都会触发该函数。
 	 // 对响应错误做点什么
    ,error => {
        return Promise.reject(error)
    })
//导出默认
export default serve

如果要启用全局配置的话 请在入口函数main.js中配置

vue2

import serve from "@/api/server";
import Vue from 'vue'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)
// 全局配置axios
Vue.prototype.$axios = serve

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

使用 （例子）

<template>
  <div>
    
  </div>
</template>

<script>
export default {
  name: "sss",
  data(){
    
  },
  mounted() {
    //基本使用 使用 url 请求地址
    this.$axios.get('url').then(res => {
      console.log(res);
    })
  }
}
</script>

<style scoped>

</style>

vue3

一般来说vue3不建议使用全局配置，你想在哪个组件使用 引入就好了

import { createApp } from 'vue'
import App from './App.vue'
import serve from "@/api/server";

const app = createApp(App)
//全局配置
app.config.globalProperties.$axios = serve
app.use(serve )
app.mount('#app')

使用 例子

<template>

</template>

<script setup>

    import {onMounted,ref,getCurrentInstance,inject } from 'vue'

    onMounted(() => {
      const axios = getCurrentInstance().appContext.config.globalProperties.$axios //vue3中没有this getCurrentInstance().appContext.config.globalProperties获取到全局注册的属性或方法
      axios.get('sentence').then(res => {
        console.log(res);
      })
    })



</script>

<style scoped>

</style>

测试可用

2.2 request.js文件

这个文件一般配置请求接口的地址

// 获取当前环境变量 true => 生产环境 false => 开发环境
// const BASEURL = (process.env.NODE_ENV === 'production') ? 'http://localhost:8888/api' : '/api'
const IMGBASEURL = 'http://localhost:8888/api'
const BASEURL = 'http://localhost:8888/api'

const api = {
  BASEURL: IMGBASEURL,
  vCode: `${BASEURL}/register/verify/`, //{``} es6 模板语法
  //例如登录
  login: `${BASEURL}/login`,
}
//默认导出
export default api

3 整合使用

(1).vue2使用

方法一

首先 我们了解一下混入 :
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项(data,methods…)将被“混合”进入该组件本身的选项。

更多内容参见vue mixin 官网
链接: vue mixin

新建minxs文件

/*
 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
 一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项(data,methods..)将被“混合”进入该组件本身的选项。
 更多内容参见vue mixin 官网
 https://v2.cn.vuejs.org/v2/guide/mixins.html#
 当数据名字和组件的数据冲突时 优先使用组件的数据
 */
/*
测试案例
const myMixin = {
  data() {
   return {
     msg:'我是混入-------'
   }
  },
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
export default myMixin
*/
//导入service.js 我们配置好的axios实例
import request from '../api/serve'

const myMixin = {
  data () {
    return {
      //加载中
      loading: false
    }
  },
  methods:{
    /*
     *封装发送axios 请求的方法
     */
    sendReq(params,callback){ //参数params 包含请求地址 请求方式 请求参数 请求头这些... callback 回调函数
      request({
        method: params.method || 'POST',
        url: params.url,
        data: params.data || {}, //请求数据在body用这个
        withCredentials : true,
        params: params.payload || {}, //请求数据在param 用这个
        headers: {
          'Content-type': params.contentType || 'application/json;charset=utf-8'
        }
      }).then(res => {
        if(res && res.data) {
          callback && callback(res.data)
        }
      },error => {

      })
    },
  }
}

export default myMixin

使用案例(登录为例)

<template>
  <div>vue2axios使用</div>
</template>

<script>
import api from "@/api/request";
import myMixin from "../../../mixin";
export default {
  mixins:[myMixin],
  name: "testVue2",
  data(){

  },
  mounted() {
    //定义请求地址 请求参数
    let params = {
      url:api.login,
      method:'GET',
      data:{
        username:'1123',
        password:'13456'
      }
    }
    //直接使用this 即可使用到混入里面我们封装好的 sendReq方法
    this.sendReq(params,(res => {
      console.log(res.data);
    }))
  }
}
</script>

<style scoped>

</style>

方法二

我们也可以直接将 请求封装在函数里 并且暴露出去 以下是对 request.js的改变

import serve from "@/api/server";

//以登录请求get为例
export function login(data){
    serve({
        url:'/login',
        method:'get',
        params:data
    })
}

//以登录请求post为例
export function login(data){
    serve({
        url:'/login',
        method:'post',
        data
    })
}

使用案例(登录为例)

<template>
  <div>vue2axios使用</div>
</template>

<script>
//要使用哪个引入哪个即可
import {login} from "@/api/rest";

export default {
  name: "testVue2",
  data(){

  },
  mounted() {
    //定义请求地址 请求参数
    let data = {
      username:'1123',
      password:'13456'
    }
    login(data).then(res => {
      console.log(res);
    })

  }
}
</script>

<style scoped>

</style>

(2).vue3使用

在vue3中 没有混入 我们使用:

组合式函数
什么是“组合式函数”？#
在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

链接: 组合式函数

新建一个 组合式函数 .js文件

// 在vue2中我们可以使用混入属性在各个组件中使用axios请求方法,但是在vue3中不推荐使用 如此我们可以使用 组合式 API
/*
如你所见，核心逻辑完全一致，我们做的只是把它移到一个外部函数中去，并返回需要暴露的状态。
和在组件中一样，你也可以在组合式函数中使用所有的组合式 API。
现在，xxx() 的功能可以在任何组件中轻易复用了。
更酷的是，你还可以嵌套多个组合式函数：一个组合式函数可以调用一个或多个其他的组合式函数。
这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。
实际上，这正是为什么我们决定将实现了这一设计模式的 API 集合命名为组合式 API。
*/
import {ref} from "vue";
import serve from "@/api/server";

export default () => {
    //定义一个封装axios请求的函数
    //返回axios请求函数
    return (params, callback) => {
        serve({
            method: params.method || 'POST',
            url: params.url,
            data: params.data || {},
            withCredentials: true,
            params: params.payload || {},
            headers: {
                'Content-type': params.contentType || 'application/json;charset=utf-8'
            }
        }).then(res => {
            if (res && res.data) {
                callback && callback(res.data)
            }
        }, error => {

        })
    }
}

<template>
  <span > {{pome}} </span>
</template>

<script setup>
//导入封装好的方法
  import request from "@/api/request";
  import {ref,onMounted} from 'vue'

  let pome = ref('人面不知何处去,桃花依旧笑春风')

  let sendReq = request()

  const getPome = () => {
    let params = {
      url:'sentence',
      method:'GET'
    }
    //请求今日诗词 api 接口
    sendReq(params,(res) => {
      pome.value = res.content
      console.log(pome.value);
      console.log(res);
    })
  }

  onMounted(() => {
    getPome()
  })

</script>

<style scoped>

</style>

实测可用

4.常见问题

(1)跨域问题

什么是跨域:摘自网上

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。 同源策略限制了一下行为： Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去

== 解决==

前端vue3

在vue.config.js 文件设置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  //前端跨域代理
  devServer: {
  //是否自启动项目
    open: false,
    port: 8080,
    proxy: {
      '/apis': {
        target: 'https://v2.jinrishici.com/',  // 目标host 前缀
        ws: true,  // 是否开启跨域
        changeOrigin: true,  // 
        pathRewrite: {
          '^/apis': ''  // 代理的路径
        }
      },
    }
  }
})

后端（java）

springboot

@Configuration
@Slf4j
public class WebConfig implements WebMvcConfigurer {

	/**
     * 解决跨域问题
     * */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路由
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOriginPatterns("*")
                // 是否允许携带cookie参数
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("*")
                // 跨域允许时间
                .maxAge(3600);
    }
}

任选其一即可

以上就是全部内容了 欢迎指正和讨论~~~~~~~~~~~~~~~~~~~~~~~~

东风未起，花上纤尘无影。-‘丑奴儿慢·麓翁飞翼楼观雪’