好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Vue3全局配置axios的两种方式总结

前言

边看边学边记录 系列 ，正好到 Vue3 了今天就和大家一起学习并记录一下 Vue3 的Compos IT ion API(组合式API) 中是如何全用使用 Axios 的！

一、回顾 Vue2 的全局引用方式 &nbs p;

1. 简单 项目的全局引用

如果只是简单几个页面的使用，无需太过复杂的配置就可以直接再 m ai n.js 中进行挂载

import Vue  From  "vue";
 
/* 第一步下载 axios 命令：npm i axios  或者 yarn add axios 或者pnpm i axios */
/* 第二步引入axios */
import axios f rom  'axios'
 
 
// 挂载一个自定义属性$http
Vue. PR ototy PE .$http = axios
// 全局配置axios请求根路径(axios.默认配置.请求根路径)
axios. defaults .baseURL = 'http://yuf ei .shop:3000'

页面使用

methods:{
    getData(){
        this.$http.get('/barry').then(res=>{
            console. LOG ('res',res)
        )}    }
}

2. 复杂项目的三步封装

① 新建 util/request.js (配置全局的Axios，请求拦截、响应拦截等)

关于 VFr am e 有疑问的 同学 可以移步   前端不使用 il8n，如何优雅的实现多语言 ？ 

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 -t ype"] = "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  cultu rename  = 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 = encodeURI component (propName) + "=";
        if (value !== null && typeof value !== "un define d") {
          if (typeof value === "object") {
            for (const key of Object.keys(value)) {
              let params = propName + "[" + key + "]";
              var s ub Part = 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("SessionE xp i red "),
        VFrame.l(" Sys temInfo"),
        {
          confirmButtonText: VFrame.l("Relo gin "),
          type: "warning"
        }
      ).then(() => {
        store.dispatch("LogOut").then(() => {
          location. hr ef = "/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("TheSystemInterf ACER equestTimedOut");
    } else if (message.includes("Request failed with  stat us 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).@R_ 126 _1282@(' # 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. get current Instance 组合式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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue3项目中封装axios的示例代码 vue3+vite+axios 配置连接后端调用接口的实现方法 前端vue3使用axios调用后端接口的实现方法 vue3 axios 实现自动化api配置详解 Vue3在Setup中使用axios请求获取的值方式 关于Vue3使用axios的配置教程详解 Vue3.0 axios跨域请求代理服务器配置方式 Vue3 axios配置以及cookie的使用方法实例演示

总结

以上是 为你收集整理的 Vue3全局配置axios的两种方式总结 全部内容，希望文章能够帮你解决 Vue3全局配置axios的两种方式总结 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3全局配置axios的两种方式总结的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did203840
  阅读：58次

上一篇： vant-List-@load事件一直触发的解决

下一篇：vue3+ElementPlus使用lang="ts"报Unexpected t