proxy.$axios 和 this.axios 的区别

`proxy.$axios` 和 `this.axios` 都是使用 axios 库进行 HTTP 请求的方式，但是它们的使用场景有所不同。

`proxy.$axios` 是在 Vue.js 框架下的一个全局对象，可以在任何组件中使用，它是在 Vue 的原型上挂载了 axios 实例。在组件中使用 `proxy.$axios` 可以方便地进行 HTTP 请求，并可以通过 Vue 的生命周期钩子等方式进行拦截器的设置和统一处理。

而 `this.axios` 是在组件内部创建的一个 axios 实例。它的作用域只在当前组件内部，用于处理当前组件的数据请求。使用 `this.axios` 可以更好地控制当前组件的请求行为，例如可以单独设置请求头、请求参数等。

总的来说，`proxy.$axios` 适用于全局统一处理请求的场景，而 `this.axios` 更适用于某个组件需要独立控制请求的场景。

相关问题

以下代码出现了无法渲染列表的问题 <script setup> import { getCurrentInstance } from "vue"; let { proxy } = getCurrentInstance(); let students = []; function getData() { proxy.$axios.get('http://localhost:3000/students').then(res => { students = res.data; }) } </script> <template> <div> <button @click="getData">获取数据</button> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>姓别</th> <th>分数</th> </tr> </thead> <tbody> <tr v-for="item in students" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.gender }}</td> <td>{{ item.score }}</td> </tr> </tbody> </table> </div> </template> <style scoped> </style>

这段代码中存在一个问题，就是当获取到数据后，students数组的值被更新了，但是并没有通知Vue重新渲染模板，导致列表无法显示。解决这个问题可以使用Vue的响应式系统，将students数组变成响应式的。将代码修改如下即可：

<script setup>
import { getCurrentInstance, reactive } from "vue";
let { proxy } = getCurrentInstance();
let state = reactive({
  students: []
});
function getData() {
  proxy.$axios.get('http://localhost:3000/students').then(res => {
    state.students = res.data;
  })
}
</script>
<template>
  <div>
    <button @click="getData">获取数据</button>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>姓别</th>
          <th>分数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in state.students" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<style scoped>
</style>

<script lang="ts"> import { defineComponent, reactive, toRefs, getCurrentInstance } from "vue"; import GeetestCaptcha from "./components/GeetestCaptcha.vue"; declare global { interface Window { [propName: string]: never; } } export default defineComponent({ name: "App", components: { GeetestCaptcha, }, setup() { const instance: any = getCurrentInstance(); let data = reactive({ captchaConfig: { config: { captchaId: "54088bb07d2df3c46b79f80300b0abbe", language: "en", product: "bind", }, handler: captchaHandler, }, }); function login() { if (data.captchaConfig.config.product === "bind") { if (window.captchaObj) { (window as any).captchaObj.showCaptcha(); } else { alert("验证码怎么还没初始化完成呀"); return false; } } else { validate(); } } function validate() { var result = (window as any).captchaObj.getValidate(); if (!result) { alert("请先完成验证！"); return; } instance.proxy .$axios({ method: "get", url: "/demo/login", params: Object.assign(result, { captcha_id: "54088bb07d2df3c46b79f80300b0abbe", }), }) .then((res: any) => { if (res.data.result) { console.log(res.data); alert(res.data.result); } }); } function captchaHandler(captchaObj: any) { (window as any).captchaObj = captchaObj; captchaObj .appendTo("#captcha") .onReady(function () { console.log("ready"); }) .onNextReady(function () { console.log("nextReady"); }) .onBoxShow(function () { console.log("boxShow"); }) .onError(function (e: any) { console.log(e); }) .onSuccess(function () { if (data.captchaConfig.config.product === "bind") { validate(); } }); } return { login, ...toRefs(data), }; }, }); </script>

这是一个基于Vue开发的组件，用于实现极验验证码功能。其中引入了GeetestCaptcha组件，并定义了一个名为App的组件。在setup函数中，通过reactive函数创建了一个响应式对象data，包含了captchaConfig配置和login函数等属性。其中login函数用于触发验证码验证，根据配置的product类型决定是展示验证码还是直接进行验证。validate函数用于发送验证请求，并在请求成功后进行相应的操作。captchaHandler函数用于处理验证码对象，并将其保存在全局变量中。最后，通过toRefs函数将响应式对象转化为普通对象，并将其与login函数一起返回。