Vue3+TS搭建项目网络请求Axios

2024-02-06 21:30:17

Vue3 + TypeScript项目中使用Axios进行网络请求

1. 安装Axios

首先，我们需要在项目中安装Axios库。我们可以使用npm或yarn进行安装：

npm install axios

或

yarn add axios

2. 配置Axios

安装完成后，我们需要在项目中配置Axios。我们可以创建一个名为axios.config.js的文件，并添加以下配置：

import axios from 'axios';

// 创建Axios实例
const instance = axios.create({
  baseURL: 'http://localhost:3000', // API根路径
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

// 导出Axios实例
export default instance;

在配置文件中，我们设置了Axios实例的默认配置，包括baseURL、超时时间和默认请求头。

3. 发送网络请求

接下来，我们就可以在项目中发送网络请求了。我们可以使用Axios实例的get()、post()、put()和delete()方法发送不同的请求。

例如，发送一个GET请求：

import axios from './axios.config';

axios.get('/users').then((response) => {
  console.log(response.data);
}).catch((error) => {
  console.error(error);
});

在上面的代码中，我们使用Axios实例的get()方法发送了一个GET请求。请求成功后，我们会收到一个响应对象，其中包含了服务器返回的数据。如果请求失败，我们会收到一个错误对象，其中包含了错误信息。

4. 处理请求和响应

在发送网络请求时，我们通常需要处理请求和响应。我们可以使用Axios实例的interceptors属性来拦截请求和响应。

例如，我们可以使用以下代码来拦截所有的请求，并为每个请求添加一个Authorization头：

import axios from './axios.config';

axios.interceptors.request.use((config) => {
  // 在发送请求之前做一些事情
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  // 处理请求错误
  return Promise.reject(error);
});

我们还可以使用以下代码来拦截所有的响应，并对响应中的数据进行处理：

import axios from './axios.config';

axios.interceptors.response.use((response) => {
  // 在收到响应之后做一些事情
  const data = response.data;
  if (data.code !== 0) {
    // 处理错误响应
    return Promise.reject(data.message);
  }
  return data;
}, (error) => {
  // 处理响应错误
  return Promise.reject(error);
});

5. 在Vue组件中使用Axios

在Vue组件中，我们可以使用Axios实例来发送网络请求。我们可以使用Vue的mounted()生命周期钩子来初始化Axios实例，并使用methods属性来定义网络请求的方法。

例如，以下代码演示如何在Vue组件中发送一个GET请求：

<template>
  <div>
    <button @click="getUsers">获取用户列表</button>
  </div>
</template>

<script>
import axios from './axios.config';

export default {
  methods: {
    getUsers() {
      axios.get('/users').then((response) => {
        console.log(response.data);
      }).catch((error) => {
        console.error(error);
      });
    },
  },
};
</script>