axios模塊化封裝實例化及vue本地解決跨域方案

更新時間：2023年05月31日 09:22:49 作者：灰太狼的情與殤

這篇文章主要為大家介紹了axios模塊化封裝實例化及vue本地解決跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

開發(fā)環(huán)境 vue+axios+typescript+eslint+prettier

電腦系統(tǒng) windows10專業(yè)版

在使用vue開發(fā)的過程中,我們在數(shù)據(jù)交互的過程中,一般會選擇使用axios,很多小伙伴都在使用,下面我來分享一下axios封裝和vue開發(fā)解決跨域。

安裝axios

npm i axios -S

后端接口如下

主機一:http://192.168.0.103:8020
   接口: /api/login
主機二: http://192.168.0.103:3000
   接口: /chen

根目錄結(jié)構(gòu)

在根目錄下,新建文件,目錄結(jié)構(gòu)如下:

----src
----.env.development
----.env.production
----.env.test

env.development代碼

NODE_ENV = 'development'
//指定當前環(huán)境模式
VUE_APP_CURRENTMODE = 'development'
VUE_APP_BASE_URL = "http://192.168.0.103:8020"
VUE_APP_BASE_PL="http://192.168.0.103:3000"
VUE_APP_BASE_PLAPI="/chen"
VUE_APP_BASE_API="/api"

在src錄下,新建network文件夾,目錄結(jié)構(gòu)如下:

----src
-----network
------Instances(實例集合)
-------index.ts(引入實例)
-------Instance1.ts(實例1)
-------Instance2.ts(實例2)
------api.js(接口封裝)

Instances下Instance1.ts代碼

import axios from "axios";
export const Instance1 = (config: Object) => {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_PLAPI,
    timeout: 900000,
  });
  instance.interceptors.request.use(
    (config) => {
      if (config.method === "get") {
        config.url = config.url + "?" + config.data;
      }
      if (sessionStorage.getItem("Authorization")) {
        config.headers.Authorization =
          "auth " + sessionStorage.getItem("Authorization");
      }
      // //console.log("請求攔截成功啦");
      // //console.log(config);
      return config;
    },
    (err) => {
      console.log("請求失敗啦");
      console.log(err);
    }
  );
  //
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => {
      console.log("響應失敗");
      console.log(err);
      // return err;
    }
  );
  return instance(config);
};

Instances下Instance2.ts代碼

import axios from "axios";
import qs from "qs";
export const Instance2 = (config: Object) => {
  const instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 900000,
  });
  instance.interceptors.request.use(
    (config) => {
      if (config.method === "get") {
        config.url = config.url + "?" + qs.stringify(config.data);
      }
      if (sessionStorage.getItem("Authorization")) {
        config.headers.Authorization =
          "auth " + sessionStorage.getItem("Authorization");
      }
      // //console.log("請求攔截成功啦");
      // //console.log(config);
      return config;
    },
    (err) => {
      console.log("請求失敗啦");
      console.log(err);
    }
  );
  //
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => {
      console.log("響應失敗");
      console.log(err);
      // return err;
    }
  );
  return instance(config);
};

Instances下index.ts代碼

import { Instance1 } from "@/network/Instances/Instance1";
import { Instance2 } from "@/network/Instances/Instance2";
export { Instance1, Instance2 };

networt中api.ts代碼

import { Instance1, Instance2 } from "@/network/Instances";
export const Chen = (value: any) => {
  return Instance1({
    url: "/chen",
    method: "post",
    // data: value, //傳參方式一:缺點(如果這個接口在很多地方進行了調(diào)用,修改參數(shù)了,我們需要修改很多的地方)
    data: { password, account, code } //傳參方式二:推薦傳參方法,可以更好的維護
  });
};
export const Login2 = (value: any) => {
  return Instance2({
    url: "/login",
    method: "post",
    data: value,
  });
};

在根目錄下新建vue.config.js

(和package.json同級),代碼如下

module.exports = {
  // 打包的時候去掉.map文件
  productionSourceMap: false,
  devServer: {
    proxy: {
      "/api": {
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_API
        },
      },
      "/chen": {
        target: process.env.VUE_APP_BASE_PL,
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/chen": process.env.VUE_APP_BASE_PL
        },
      },
    }
  },
  chainWebpack: (config) => {
    // 開啟eslint自動修復，關(guān)鍵代碼
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .loader("eslint-loader")
      .tap((options) => {
        options.fix = true;
        return options;
      });
  },
};

請求結(jié)果如下: