vue3使用axios前后端交互

1. 安装axios

在项目中使用axios前，需要先安装axios。可以使用npm或yarn进行安装。

npm安装：

npm install axios --save

yarn安装：

yarn add axios

2. 创建axios实例

在vue3中使用axios时，一般会创建一个axios实例，配置一些默认参数，例如请求地址、请求超时时间、请求头等。在创建axios实例时可以使用axios.create()方法进行创建。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000', //请求地址
  timeout: 5000, //请求超时时间
  headers: {
    'Content-Type': 'application/json', //请求头
  },
});

export default instance;

3. 发送请求

在vue3中使用axios发送请求，可以使用两种方式：

（1）使用async/await方式

import axiosInstance from './axiosInstance';

async function fetchData() {
  try {
    const response = await axiosInstance.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

（2）使用promise方式

import axiosInstance from './axiosInstance';

function fetchData() {
  axiosInstance.get('/api/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
}

4. 设置拦截器

在使用axios时，可以设置拦截器，对请求和响应进行处理。可以使用axios.interceptors.request.use()方法设置请求拦截器，使用axios.interceptors.response.use()方法设置响应拦截器。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
  },
});

//请求拦截器
instance.interceptors.request.use(config => {
  //在发送请求之前做些什么
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  //请求错误时做些什么
  console.log(error);
  return Promise.reject(error);
});

//响应拦截器
instance.interceptors.response.use(response => {
  //对响应数据做些什么
  return response;
}, error => {
  //对响应错误做些什么
  console.log(error);
  return Promise.reject(error);
});

export default instance;

以上就是在vue3中使用axios进行前后端交互的步骤。