Vue axios封装

秃头Chao

已于 2023-08-25 16:43:20 修改

阅读量87

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-24 11:38:41 首次发布

本文链接：https://blog.csdn.net/chao953211/article/details/131892880

版权

该文章介绍了如何在Vue项目中集成axios库，首先通过npm安装并保存依赖，然后在main.js中导入并挂载到Vue原型上，方便全局使用。接着在api模块下创建api.js，设置axios的基础配置，包括超时时间和基础URL，并添加请求和响应拦截器。最后展示了如何封装get和post方法以及在其他组件中调用这些API函数的例子。

摘要由CSDN通过智能技术生成

概要

第一步先安装 npm install --save axios

在以下代码复制到main.js

import { apiGet, apiPost } from "./api/api";

Vue.prototype.$apiGet = apiGet;

Vue.prototype.$apiPost = apiPost;

第二步创建文件 api

整体架构流程

创建文件命 api 里面的子组件api.js
在api文件里面先安装axios
在吧这些复制到文件里面

import axios from "axios";
axios.defaults.timeout = 30000;
axios.defaults.baseURL ='';  //接口


axios.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
axios.interceptors.response.use(
  (response) => {
    if (response.status == 200) {
      return response;
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);
export function apiGet(url) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url,
    }).then(
      (value) => {
        resolve(value.data);
      },
      (reason) => {
        reject(reason);
      }
    );
  });
}
export function apiPost(url, data) {
  return new Promise((resolve, reject) => {
    axios({
      method: "post",
      url,
      data,
    }).then(
      (value) => {
        resolve(value.data);
      },
      (reason) => {
        reject(reason);
      }
    );
  });
}

在http里面

在http文件里面引入
import { apiGet, apiPost } from "./api";
//这个是传参封装  addSystemRole在使用的文件调用这个名字
export function addSystemRole(data) {
  return post("", data);
}
  // 这个是不传参
export function getCode() {
  return get("");
}