vue3封装ajax

作者：System 时间：2024年08月24日分类：所有,ajax 字数：1247

这篇文章距离上次修改已过223天，其中的内容可能已经有所变动。

在Vue 3中，可以使用Axios库作为HTTP客户端来封装AJAX请求。以下是一个简单的封装示例：

首先，安装Axios：

npm install axios

然后，创建一个用于封装AJAX请求的文件，例如http.js：

import axios from 'axios';

const http = axios.create({
  baseURL: 'http://your-api-url/', // 替换为你的API基地址
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
http.interceptors.request.use(
  config => {
    // 可以在这里添加例如token等请求头
    // if (store.getters.token) {
    //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
    // }
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
http.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default http;

使用封装后的AJAX进行请求：

import http from './http.js';

// 获取用户信息
http.get('/user/info')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

// 发送数据
http.post('/user/login', { username: 'example', password: '123456' })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

这样，你就可以在Vue 3项目中方便地使用封装后的AJAX进行数据请求了。

vue3封装ajax

评论已关闭

推荐阅读