我要评论前言
边看边学边记录系列，正好到 vue3 了今天就和大家一起学习并记录一下 vue3 的composition api(组合式api) 中是如何全用使用 axios 的！
一、回顾 vue2 的全局引用方式
1. 简单项目的全局引用
如果只是简单几个页面的使用，无需太过复杂的配置就可以直接再 main.js 中进行挂载
import vue from "vue"; /* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */ /* 第二步引入axios */ import axios from 'axios' // 挂载一个自定义属性$http vue.prototype.$http = axios // 全局配置axios请求根路径(axios.默认配置.请求根路径) axios.defaults.baseurl = 'http://yufei.shop:3000'
页面使用
methods:{
getdata(){
this.$http.get('/barry').then(res=>{
console.log('res',res)
)} }
}2. 复杂项目的三步封装
① 新建 util/request.js (配置全局的axios，请求拦截、响应拦截等)
关于 vframe 有疑问的同学可以移步 ？
import axios from "axios";
import { notification, messagebox, message } from "element-ui";
import store from "@/store";
import { gettoken } from "@/utils/auth";
import errorcode from "@/utils/errorcode";
import cookies from "js-cookie";
import vframe from "../framework/vframe.js";
import constant from '@/constant.js'
axios.defaults.headers["content-type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseurl选项，表示请求url公共部分
baseurl: process.env.vue_app_base_api,
// 超时
timeout: 120000
});
// request拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
const istoken = (config.headers || {}).istoken === false;
if (gettoken() && !istoken) {
config.headers["authorization"] = "bearer " + gettoken(); // 让每个请求携带自定义token 请根据实际情况自行修改
}
var culturename = cookies.get(constant.ux_language);
if (culturename) {
config.headers[constant.ux_language] = culturename; // 让每个请求携带自定义token 请根据实际情况自行修改
}
// get请求映射params参数
if (config.method === "get" && config.params) {
let url = config.url + "?";
for (const propname of object.keys(config.params)) {
const value = config.params[propname];
var part = encodeuricomponent(propname) + "=";
if (value !== null && typeof value !== "undefined") {
if (typeof value === "object") {
for (const key of object.keys(value)) {
let params = propname + "[" + key + "]";
var subpart = encodeuricomponent(params) + "=";
url += subpart + encodeuricomponent(value[key]) + "&";
}
} else {
url += part + encodeuricomponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config;
},
error => {
console.log(error);
promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorcode[code] || res.data.msg || errorcode["default"];
if (code === 401) {
messagebox.alert(
vframe.l("sessionexpired"),
vframe.l("systeminfo"),
{
confirmbuttontext: vframe.l("relogin"),
type: "warning"
}
).then(() => {
store.dispatch("logout").then(() => {
location.href = "/index";
});
});
} else if (code === 500) {
message({
message: msg,
type: "error"
});
if (res.data.data) {
console.error(res.data.data)
}
return promise.reject(new error(msg));
} else if (code !== 200) {
notification.error({
title: msg
});
return promise.reject("error");
} else {
if (res.data.uxapi) {
if (res.data.success) {
return res.data.result;
} else {
notification.error({ title: res.data.error });
console.error(res);
return promise.reject(res.data.error);
}
} else {
return res.data;
}
}
},
error => {
console.log("err" + error);
let { message } = error;
if (message == "network error") {
message = vframe.l("thebackendportconnectionisabnormal");
} else if (message.includes("timeout")) {
message = vframe.l("thesysteminterfacerequesttimedout");
} else if (message.includes("request failed with status code")) {
message =
vframe.l("systeminterface") +
message.substr(message.length - 3) +
vframe.l("abnormal");
}
message({
message: vframe.l(message),
type: "error",
duration: 5 * 1000
});
return promise.reject(error);
}
);
export default service;② 新建 api/login.js (配置页面所需使用的 api)
import axios from "axios";
import { notification, messagebox, message } from "element-ui";
import store from "@/store";
import { gettoken } from "@/utils/auth";
import errorcode from "@/utils/errorcode";
import cookies from "js-cookie";
import vframe from "../framework/vframe.js";
import constant from '@/constant.js'
axios.defaults.headers["content-type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseurl选项，表示请求url公共部分
baseurl: process.env.vue_app_base_api,
// 超时
timeout: 120000
});
// request拦截器
service.interceptors.request.use(
config => {
// 是否需要设置 token
const istoken = (config.headers || {}).istoken === false;
if (gettoken() && !istoken) {
config.headers["authorization"] = "bearer " + gettoken(); // 让每个请求携带自定义token 请根据实际情况自行修改
}
var culturename = cookies.get(constant.ux_language);
if (culturename) {
config.headers[constant.ux_language] = culturename; // 让每个请求携带自定义token 请根据实际情况自行修改
}
// get请求映射params参数
if (config.method === "get" && config.params) {
let url = config.url + "?";
for (const propname of object.keys(config.params)) {
const value = config.params[propname];
var part = encodeuricomponent(propname) + "=";
if (value !== null && typeof value !== "undefined") {
if (typeof value === "object") {
for (const key of object.keys(value)) {
let params = propname + "[" + key + "]";
var subpart = encodeuricomponent(params) + "=";
url += subpart + encodeuricomponent(value[key]) + "&";
}
} else {
url += part + encodeuricomponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config;
},
error => {
console.log(error);
promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
res => {
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const msg = errorcode[code] || res.data.msg || errorcode["default"];
if (code === 401) {
messagebox.alert(
vframe.l("sessionexpired"),
vframe.l("systeminfo"),
{
confirmbuttontext: vframe.l("relogin"),
type: "warning"
}
).then(() => {
store.dispatch("logout").then(() => {
location.href = "/index";
});
});
} else if (code === 500) {
message({
message: msg,
type: "error"
});
if (res.data.data) {
console.error(res.data.data)
}
return promise.reject(new error(msg));
} else if (code !== 200) {
notification.error({
title: msg
});
return promise.reject("error");
} else {
if (res.data.uxapi) {
if (res.data.success) {
return res.data.result;
} else {
notification.error({ title: res.data.error });
console.error(res);
return promise.reject(res.data.error);
}
} else {
return res.data;
}
}
},
error => {
console.log("err" + error);
let { message } = error;
if (message == "network error") {
message = vframe.l("thebackendportconnectionisabnormal");
} else if (message.includes("timeout")) {
message = vframe.l("thesysteminterfacerequesttimedout");
} else if (message.includes("request failed with status code")) {
message =
vframe.l("systeminterface") +
message.substr(message.length - 3) +
vframe.l("abnormal");
}
message({
message: vframe.l(message),
type: "error",
duration: 5 * 1000
});
return promise.reject(error);
}
);
export default service;③ 页面使用引入
import { login } from "@/api/login.js"
接下来不用多说，相信大家已经会使用了二、vue3 中的使用
上面回顾完 vue2 中使用 axios 我们来一起看看 vue3 中axios的使用( 简单demo，前台使用vue3，后台使用 node.js )，仅供学习！
1. provide/inject 方式
① main.js 中 使用 provide 传入
import {
createapp
} from 'vue'
import app from './app.vue'
import router from './router'
import store from './store'
import "lib-flexible/flexible.js"
import axios from "@/util/request.js"
const app = createapp(app);
app.provide('$axios', axios)
app.use(store).use(router).mount('#app');② 需要用到的页面使用 inject 接受
import { ref, reactive, inject, onmounted} from "vue";
export default {
setup() {
const $axios = inject("$axios");
const getdata = async () => {
data = await $axios({ url: "/one/data" });
console.log("data", data);
};
onmounted(() => {
getdata()
})
return { getdata }
}
}这个就是借助 provide 做一个派发，和 vue2 中的差距使用方法差距不大
2. getcurrentinstance 组合式api引入
① main.js 中挂载
import {
createapp
} from 'vue'
import app from './app.vue'
import router from './router'
import store from './store'
import "lib-flexible/flexible.js"
import axios from "@/util/request.js"
const app = createapp(app);
/* 挂载全局对象 */
app.config.globalproperties.$axios = axios;
app.use(store).use(router).mount('#app');/* 挂载全局对象 */
app.config.globalproperties.$axios = axios;
重点就是上面这句
② 需要用的页面使用 composition api -- getcurrentinstance 拿到
<script>
import { reactive, onmounted, getcurrentinstance } from "vue";
export default {
setup() {
let data = reactive([]);
/**
* 1. 通过getcurrentinstance方法获取当前实例
* 再根据当前实例找到全局实例对象appcontext，进而拿到全局实例的config.globalproperties。
*/
const currentinstance = getcurrentinstance();
const { $axios } = currentinstance.appcontext.config.globalproperties;
/**
* 2. 通过getcurrentinstance方法获取上下文，这里的proxy就相当于this。
*/
const { proxy } = currentinstance;
const getdata = async () => {
data = await $axios({ url: "/one/data" });
console.log("data", data);
};
const getdata2 = async () => {
data = await proxy.$axios({ url: "/one/data" });
console.log("data2", data);
};
onmounted(() => {
getdata()
});
return { getdata };
},
};
</script>下图可以看到我们确实调用了 2次 api
其实通过 composition api 中的 getcurrentinstance 方法也是有两种方式的
1. 通过 getcurrentinstance 方法获取当前实例，再根据当前实例找到全局实例对象appcontext，进而拿到全局实例的config.globalproperties。
const currentinstance = getcurrentinstance(); const { $axios } = currentinstance.appcontext.config.globalproperties;2. 通过getcurrentinstance方法获取上下文，这里的proxy就相当于this。
const currentinstance = getcurrentinstance(); const { proxy } = currentinstance; const getdata2 = async () => { data = await proxy.$axios({ url: "/one/data" }); console.log("data2", data); };
总结
到此这篇关于vue3全局配置axios的两种方式的文章就介绍到这了,更多相关vue3全局配置axios内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论