关于vue.js:axios模块化封装实例化和vue本地解决跨域

1. 开发环境 vue+axios+typescript+eslint+prettier
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们在数据交互的过程中, 个别会抉择应用 axios, 很多小伙伴都在应用, 上面我来分享一下 axios 封装和 vue 开发解决跨域。
4. 装置 axios

npm i axios -S

4-1. 后端接口如下:

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

5. 在根目录下, 新建文件, 目录构造如下:

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

5-1 .env.development 代码如下:

NODE_ENV = 'development'
// 指定以后环境模式
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"

6. 在 src 录下, 新建 network 文件夹, 目录构造如下:

----src
-----network
------Instances(实例汇合)
-------index.ts(引入实例)
-------Instance1.ts(实例 1)
-------Instance2.ts(实例 2)
------api.js(接口封装)

6-1.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);
};

6-2.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);
};

6-3.Instances 下 index.ts 代码如下:

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

export {Instance1, Instance2};

6-4.networt 中 api.ts 代码如下:

import {Instance1, Instance2} from "@/network/Instances";
export const Chen = (value: any) => {
  return Instance1({
    url: "/chen",
    method: "post",
    // data: value, // 传参形式一: 毛病 (如果这个接口在很多中央进行了调用, 批改参数了, 咱们须要批改很多的中央)
    data: {password, account, code} // 传参形式二: 举荐传参办法, 能够更好的保护
  });
};

export const Login2 = (value: any) => {
  return Instance2({
    url: "/login",
    method: "post",
    data: value,
  });
};

7. 在根目录下新建 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 主动修复，要害代码
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .loader("eslint-loader")
      .tap((options) => {
        options.fix = true;
        return options;
      });
  },
};

8. 申请后果如下:


9. 本地的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。