Vue中对axios做一个简单的封装

努力学习的健健

已于 2022-10-24 14:26:30 修改

阅读量346

点赞数

CC 4.0 BY-SA版权

文章标签： 1024程序员节 html 前端 javascript vue.js

于 2022-10-24 14:23:07 首次发布

本文链接：https://blog.csdn.net/qq_53519425/article/details/127491347

本文介绍了如何在Vue项目中对axios进行简单的封装，包括设置baseURL和timeout，以及封装get、post等请求方法。在其他组件中，可以直接调用封装后的请求函数，简化数据获取步骤。此外，还提出了进一步封装接口的建议，以实现更简洁的调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不考虑登录权限.对axios做一个简单的封装.,.在文件中引入axios,进行封装，baseURL代表后端即服务器的地址，timeout表示接口的响应时间，超时退出

import axios from "axios";
let service = axios.create({
  // 这里是写你的公共地址
  baseURL: "https://",
  timeout: 3000,
});
export default service;

在其他文件中引入这个文件,对get,post,put,deleter进行封装.这里可以对整体请求进行一个封装.在使用如get请求,直接调用get请求即可.

import service from "..";
export function get(url, params) {
  console.log(params);
  return service({
    method: "GET",
    url: url,
    params: params,
  });
}
export function post(url, params) {
  console.log(params);
  return service({
    method: "POST",
    url: url,
    data: params,
  });
}
export function put(url, params) {
  console.log(params);
  return service({
    method: "put",
    url: url,
    data: params,
  });
}
export function deleterequest(url, params) {
  return service({

最低0.47元/天解锁文章