vue中将axios封装

在平时写项目中，经常会遇到组件调用同一个接口或者不同接口

import axios from "axios"

axios({
        url: "https://autumnfish.cn/mv/url",
        params: {
          //   接收传来的MVid
          id: this.$route.query.id,
        },
      }).then(({ data: { data } }) => {
        this.mvUrl = data.url;
      });

这样代码非常冗余，如果axios哪天不维护就要把每个用到axios组件一个个更改

解决方法就是将axios封装进单独文件，然后需要调用接口接按需引入这个文件在的不同接口方法

1.创建app.js文件

可以配置更多默认项，这里用baseURL示例

import axios from "axios";
//接口1
export function requestWyy(config) {
  const instance = axios.create({
    baseURL: "https://autumnfish.cn",
  });
  return instance(config);
}
//接口2
export function requestWyy2(config) {
  const instance = axios.create({
    baseURL: "https://autumn1fish.cn",
  });
  return instance(config);

这里没有用默认暴露是因为可能要调取不同接口，就不能调用另外的方法了

2.按需引入

import { requestWyy } from "../request/app";
 requestWyy({
      url: "/banner",
    }).then((res) => {
      this.bannersImg = res.data.banners;
    });

一个组件中需要调用哪个接口接引入哪个封装的实例

优点

更好维护，直接改app,js文件里的方法就行