前端用Axios发起请求吗

是的，前端通常使用Axios来发起HTTP请求。Axios是一个流行的JavaScript库，可以在浏览器和Node.js中使用，它提供了一个简单而强大的API，可以轻松地发送HTTP请求并处理响应。Axios支持各种请求类型（GET，POST，PUT，DELETE等），并且可以轻松处理HTTP响应。您可以在前端应用程序中使用Axios从服务器获取数据，与后端API进行交互，或将数据发送到服务器以进行处理。

相关问题

要求登录页、注册页，用Vue3来实现，要求前端发起axios请求，能拿到后端数据，并能把该数据正确渲染到页面上去

好的，下面是使用Vue3和Axios实现登录页和注册页的示例代码。

首先，需要在项目中安装vue和axios两个库：

npm install vue axios --save

然后，我们可以编写两个组件：`LoginPage`和`RegisterPage`，分别用来展示登录页和注册页。在这两个组件中，我们可以使用`reactive()`函数来创建一个响应式状态对象，包含用户填写的表单数据和后端返回的数据。在提交表单时，我们使用`axios.post()`方法向后端发送请求，并将响应数据赋值给响应式状态对象中的`data`属性。

下面是示例代码：

LoginPage.vue

<template>
  <div>
    <h1>登录页</h1>
    <form @submit.prevent="submitForm">
      <label>
        用户名：
        <input type="text" v-model="form.username" required>
      </label>
      <br>
      <label>
        密码：
        <input type="password" v-model="form.password" required>
      </label>
      <br>
      <button type="submit">登录</button>
    </form>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });
    const data = reactive({
      message: '',
    });

    const submitForm = async () => {
      try {
        const response = await axios.post('/api/login', form);
        data.message = response.data;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      form,
      submitForm,
      data,
    };
  },
};
</script>

RegisterPage.vue

<template>
  <div>
    <h1>注册页</h1>
    <form @submit.prevent="submitForm">
      <label>
        用户名：
        <input type="text" v-model="form.username" required>
      </label>
      <br>
      <label>
        密码：
        <input type="password" v-model="form.password" required>
      </label>
      <br>
      <button type="submit">注册</button>
    </form>
    <div v-if="data">{{ data }}</div>
  </div>
</template>

<script>
import axios from 'axios';
import { reactive } from 'vue';

export default {
  setup() {
    const form = reactive({
      username: '',
      password: '',
    });
    const data = reactive({
      message: '',
    });

    const submitForm = async () => {
      try {
        const response = await axios.post('/api/register', form);
        data.message = response.data;
      } catch (error) {
        console.error(error);
      }
    };

    return {
      form,
      submitForm,
      data,
    };
  },
};
</script>

在上面的示例代码中，我们使用了Vue3的`setup()`函数来组织代码。在`setup()`函数中，我们使用了`reactive()`函数来创建响应式状态对象，包含了用户填写的表单数据`form`和后端返回的数据`data`。在提交表单时，我们使用`axios.post()`方法向后端发送请求，并将响应数据赋值给`data.message`，从而触发Vue的响应式系统更新视图。

最后，我们在模板中通过`v-if`指令来判断`data`是否存在，如果存在，则显示后端返回的数据。

前端发起axios，无状态码显示

当你在前端使用axios发起请求时，如果服务器没有返回状态码或者你没有设置axios的默认配置来获取状态码，通常情况下你会收到一个空的状态属性。这可能是由于服务器响应中未包含HTTP状态码头部，或者是请求配置中的`responseType`设置为`'text'`或`'json'`等，axios默认解析了响应体而忽略了状态码。

例如，这样的 Axios 请求代码：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 只会打印数据，不会看到状态码
  })
  .catch(error => {
    if (error.response) { // 如果有响应对象，可以尝试访问状态码
      console.log(error.response.status);
    } else {
      console.log('Error', error.message);
    }
  });

如果你想要始终获取状态码，可以在 axios 的实例化时设置默认配置：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  responseType: 'json', // 设置默认响应类型为json，这样会包含status属性
});

instance.get('/data')
  .then(response => {
    console.log(response.data, response.status);
  })
  .catch(error => {
    console.error(error.response.status || error.message);
  });