axios模块化封装(实例化)和vue本地解决跨域 vue.jsaxios

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

----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, }); }; 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; }); }, };

【axios模块化封装(实例化)和vue本地解决跨域】8.请求结果如下: