收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
869
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue3使用axios的请求封装与跨域配置

2895人阅读 2022/7/29 18:06 总访问：5403461 评论：0 收藏：0 手机
分类: 前端


以前vue2当中的详细的请求封装以及跨域的可以参考：
https://www.tnblog.net/aojiancc2/article/details/4751
其实逻辑基本都是一致的，里边封装的步骤列得比较详细

先进行请求封装

在src下创建一个common文件夹里边创建一个request.js,加入封装代码。当然文件夹放哪里根据自己的需要来就行了。

加入简单封装的代码
  1. import axios from "axios";
  2. import qs from "qs";
  4. // vue3下的element-plus
  5. import { ElLoading , ElMessage } from "element-plus";
  8. const loading = {
  9.   // loading加载对象
  10.   loadingInstance: null,
  11.   // 打开加载
  12.   open(loadtext) {
  13.     if (this.loadingInstance === null) {
  14.       // 如果实例 为空，则创建
  15.       this.loadingInstance = ElLoading.service({
  16.         text: loadtext, // '加载中...', // 加载图标下的文字
  17.         spinner: "el-icon-loading", // 加载图标
  18.         background: "rgba(0, 0, 0, 0.5)", // 背景色
  19.         customClass: "loading", // 自定义样式的类名
  20.       });
  21.     }
  22.   },
  23.   // 关闭加载
  24.   close() {
  25.     // 不为空时, 则关闭加载窗口
  26.     if (this.loadingInstance !== null) {
  27.       this.loadingInstance.close();
  28.     }
  29.     this.loadingInstance = null;
  30.   },
  31. };
  33. axios.defaults.timeout = 300000; // 设置超时时间
  34. // 配置请求头数据格式
  35. // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  37. // 请求拦截器
  38. // 请求拦截器
  39. axios.interceptors.request.use(
  40.   (axiosconfig) => {
  42.     // 请求地址统一增加一个webapi，因为后台那个代理配置里边有加上webapi的前缀
  43.     //axiosconfig.url = "/webapi" + axiosconfig.url;
  45.     //从环境变量读取，线下访问接口增加webapi前缀，上线就不增加
  46.     // axiosconfig.url = process.env.VUE_APP_BASE_API + axiosconfig.url;
  47.     axiosconfig.url = "" + axiosconfig.url;
  49.     //axiosconfig.headers.Authorization = "Bearer " + token;
  50.     return axiosconfig;
  51.   },
  52.   (err) => {
  53.     loading.close(); // 关闭加载窗口
  54.     return Promise.reject(err);
  55.   }
  56. );
  58. // 响应拦截器
  59. axios.interceptors.response.use(
  60.   (res) => {
  61.     //console.log("统一响应了");
  62.     loading.close(); // 关闭加载窗口
  65.     // 如果token过期了就直接跳转到登录
  66.     // if (
  67.     //   (res.code === 401 || res.code === 500 || res.code === 403) &&
  68.     //   !sessionStorage.getItem("401show")
  69.     // ) {
  70.     //   // to re-login
  71.     //   sessionStorage["401show"] = true;
  72.     //   ElMessage.confirm("登录状态已过期", "登录提示", {
  73.     //     confirmButtonText: "重新登录",
  74.     //     cancelButtonText: "取消",
  75.     //     type: "warning",
  76.     //   })
  77.     //     .then(() => {
  78.     //       sessionStorage.clear("401show");
  79.     //       // 跳转到登录页
  80.     //       location.href = "/#/login?redirect=/school-dashboard#/zuxia/index";
  81.     //     })
  82.     //     .catch(() => {
  83.     //       sessionStorage.clear("401show");
  84.     //     });
  85.     // }
  87.     return res;
  88.   },
  89.   (err) => {
  90.     loading.close(); // 关闭加载窗口
  91.     return Promise.reject(err);
  92.   }
  93. );
  95. const request = {
  96.   get(url, data, loadtext) {
  97.     // 判断有没有参数，有参数就把参数加上
  98.     if (data) {
  99.       url = url + "?" + qs.stringify(data);
  100.     }
  101.     if (loadtext && loadtext.length > 0) {
  102.       loading.open(loadtext); // 打开加载窗口
  103.     }
  104.     return new Promise((resolve, reject) => {
  105.       axios
  106.         .get(url)
  107.         .then(function (response) {
  108.           // console.log("封装的方法数据回来了");
  109.           // console.log(response)
  110.           if (response.status === 200 && response.data.code === 200) {
  111.             resolve(response.data);
  112.           } else {
  113.             // 上面的判断要根据实际情况修改判断对哦，不然使用else里边的reject输出，虽然结果也能正确输出，但是浏览器上会提示Uncaught (in promise)，也不能继续正确的向下执行了。
  114.             reject(response.data);
  115.           }
  116.         })
  117.         .catch((e) => {
  118.           reject(e);
  119.         });
  120.     });
  121.   },
  123.   post(url, data, loadtext) {
  124.     if (loadtext && loadtext.length > 0) {
  125.       loading.open(loadtext); // 打开加载窗口
  126.     }
  128.     return new Promise((resolve, reject) => {
  129.       axios
  130.         .post(url, data)
  131.         .then(function (response) {
  132.           if (response.status === 200 && response.data.code === 200) {
  133.             resolve(response.data);
  134.           } else {
  135.             reject(response.data);
  136.           }
  137.         })
  138.         .catch((e) => {
  139.           reject(e);
  140.         });
  141.     });
  142.   },
  143. };
  145. export default request;
这个是更完善一点的封装方法

增加了put,delete等方法的封装

  1. import axios from 'axios'
  2. import qs from 'qs'
  4. // vue3下的element-plus
  5. import { ElLoading, ElMessage } from 'element-plus'
  7. // 后台接口返回成功的状态码，需要根据自己的接口修改
  8. const successCode = 200
  10. const loading = {
  11.   // loading加载对象
  12.   loadingInstance: null,
  13.   // 打开加载
  14.   open(loadtext) {
  15.     if (this.loadingInstance === null) {
  16.       // 如果实例 为空，则创建
  17.       this.loadingInstance = ElLoading.service({
  18.         text: loadtext, // '加载中...', // 加载图标下的文字
  19.         spinner: 'el-icon-loading', // 加载图标
  20.         background: 'rgba(0, 0, 0, 0.5)', // 背景色
  21.         customClass: 'loading' // 自定义样式的类名
  22.       })
  23.     }
  24.   },
  25.   // 关闭加载
  26.   close() {
  27.     // 不为空时, 则关闭加载窗口
  28.     if (this.loadingInstance !== null) {
  29.       this.loadingInstance.close()
  30.     }
  31.     this.loadingInstance = null
  32.   }
  33. }
  35. axios.defaults.timeout = 300000 // 设置超时时间
  36. // 配置请求头数据格式
  37. // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  39. // 请求拦截器
  40. axios.interceptors.request.use(
  41.   (axiosconfig) => {
  42.     // 请求地址统一增加一个webapi，因为后台那个代理配置里边有加上webapi的前缀
  43.     //axiosconfig.url = "/webapi" + axiosconfig.url;
  45.     //从环境变量读取，线下访问接口增加webapi前缀，上线就不增加
  46.     // axiosconfig.url = process.env.VUE_APP_BASE_API + axiosconfig.url;
  47.     axiosconfig.url = '' + axiosconfig.url
  48.     // console.log("请求的地址2",axiosconfig.url)
  50.     // 测试token , 获取token的方法换成自己的写法即可
  51.     let token = "eyJhbGciOiJSUzI1NiIsImtpZCI6IkU0QUU1Rk...."
  52.     axiosconfig.headers.Authorization = "Bearer " + token;
  54.     return axiosconfig
  55.   },
  56.   (err) => {
  57.     loading.close() // 关闭加载窗口
  58.     return Promise.reject(err)
  59.   }
  60. )
  62. // 响应拦截器
  63. axios.interceptors.response.use(
  64.   (res) => {
  65.     //console.log("统一响应了",res);
  66.     loading.close() // 关闭加载窗口
  68.     if(res.data.code!==successCode)
  69.     {
  70.       ElMessage({
  71.         message: res.data.msg,
  72.         type: 'error'
  73.       })
  74.     }
  76.     // 如果token过期了就直接跳转到登录
  77.     // if (
  78.     //   (res.code === 401 || res.code === 500 || res.code === 403) &&
  79.     //   !sessionStorage.getItem("401show")
  80.     // ) {
  81.     //   // to re-login
  82.     //   sessionStorage["401show"] = true;
  83.     //   ElMessage.confirm("登录状态已过期", "登录提示", {
  84.     //     confirmButtonText: "重新登录",
  85.     //     cancelButtonText: "取消",
  86.     //     type: "warning",
  87.     //   })
  88.     //     .then(() => {
  89.     //       sessionStorage.clear("401show");
  90.     //       // 跳转到登录页
  91.     //       location.href = "/#/login?redirect=/school-dashboard#/zuxia/index";
  92.     //     })
  93.     //     .catch(() => {
  94.     //       sessionStorage.clear("401show");
  95.     //     });
  96.     // }
  98.     return res
  99.   },
  100.   (err) => {
  101.     loading.close() // 关闭加载窗口
  103.     console.log(err)
  105.     ElMessage({
  106.       message: err,
  107.       type: 'error'
  108.     })
  110.     return Promise.reject(err)
  111.   }
  112. )
  114. const request = {
  115.   get(url, data, loadtext) {
  116.     // 判断有没有参数，有参数就把参数加上
  117.     if (data) {
  118.       url = url + '?' + qs.stringify(data)
  119.     }
  121.     console.log("请求的地址",url)
  123.     if (loadtext && loadtext.length > 0) {
  124.       loading.open(loadtext) // 打开加载窗口
  125.     }
  126.     return new Promise((resolve, reject) => {
  127.       axios
  128.         .get(url)
  129.         .then(function (response) {
  130.           // console.log("封装的方法数据回来了");
  131.           // console.log(response)
  132.           if (response.status === 200 && response.data.code === successCode) {
  133.             resolve(response.data)
  134.           } else {
  135.             // 上面的判断要根据实际情况修改判断对哦，不然使用else里边的reject输出，虽然结果也能正确输出，但是浏览器上会提示Uncaught (in promise)，也不能继续正确的向下执行了。
  136.             reject(response.data)
  137.           }
  138.         })
  139.         .catch((e) => {
  140.           reject(e)
  141.         })
  142.     })
  143.   },
  145.   post(url, data, loadtext) {
  146.     if (loadtext && loadtext.length > 0) {
  147.       loading.open(loadtext) // 打开加载窗口
  148.     }
  150.     return new Promise((resolve, reject) => {
  151.       axios
  152.         .post(url, data)
  153.         .then(function (response) {
  154.           if (response.status === 200 && response.data.code === successCode) {
  155.             resolve(response.data)
  156.           } else {
  157.             reject(response.data)
  158.           }
  159.         })
  160.         .catch((e) => {
  161.           reject(e)
  162.         })
  163.     })
  164.   },
  166.   put(url, data, loadtext) {
  167.     if (loadtext && loadtext.length > 0) {
  168.       loading.open(loadtext) // 打开加载窗口
  169.     }
  171.     return new Promise((resolve, reject) => {
  172.       axios
  173.         .put(url, data)
  174.         .then(function (response) {
  175.           if (response.status === 200 && response.data.code === successCode) {
  176.             resolve(response.data)
  177.           } else {
  178.             reject(response.data)
  179.           }
  180.         })
  181.         .catch((e) => {
  182.           reject(e)
  183.         })
  184.     })
  185.   },
  186.   delete(url, data, loadtext) {
  187.     if (loadtext && loadtext.length > 0) {
  188.       loading.open(loadtext) // 打开加载窗口
  189.     }
  191.     return new Promise((resolve, reject) => {
  192.       axios
  193.         .delete(url, data)
  194.         .then(function (response) {
  195.           if (response.status === 200 && response.data.code === successCode) {
  196.             resolve(response.data)
  197.           } else {
  198.             reject(response.data)
  199.           }
  200.         })
  201.         .catch((e) => {
  202.           reject(e)
  203.         })
  204.     })
  205.   }
  206. }
  208. export default request

tip:其他的封装方法比如ts版本的请求封装可以参考下面的写法

在配置好跨域

vue3的跨域配置在vite.config.js中，配置方法和以前几乎完全一致，根据自己的需求修改即可。

直接使用封装的代码调用接口

在需要使用的组件引入封装的js:

  1. import request  from '@/common/request'

把onMounted这些也引入一下：

  1. import { reactive, toRefs, onMounted  } from 'vue'

在onMounted中调用接口

  1. const initData = () =>{
  2.     //测试接口访问
  3.     request.get('/api/v1/Home/1',{}).then(res => {
  4.         console.log("测试数据返回")
  5.         console.log(res)
  6.     })
  7. }  
  9. onMounted(() => {
  10.   initData()
  11. })

数据被成功输出了：

注意要把跨域配置好，不然会报跨域相关的错误。

全局引入封装的请求js

在main.js中加入相关代码

vue2中的写法：

  1. import request from "./common/request.js";
  2. Vue.prototype.$http = request;

vue3不能这样写了，应该这样写：

  1. import request from "./common/request.js";
  2. const app = createApp(App)
  4. // vue3中要使用下面的写法
  5. app.config.globalProperties.$http = request

调用方法

先引入：

  1. import { reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
  3. let internalInstance = getCurrentInstance() as any
  4. const $http = internalInstance.appContext.config.globalProperties.$http

调用：

  1. const initData = () => {
  2.   //测试接口访问
  3.   $http.get('/api/v1/Home/1').then(res => {
  4.     console.log("测试数据返回")
  5.     console.log(res)
  6.   })
  7. }
  9. onMounted(() => {
  10.   initData()
  11. })

也可以使用异步的方式调用接口

  1. const fetchData = async () => {
  2.     const res = await $http.get('/api/v1/Home/1')
  3.     console.log("测试数据返回了")
  4.     console.log(res);
  5. }
  7. onMounted(() => {
  8.   fetchData()
  9. })

直接使用axios调用接口也是可以异步使用的

  1. const fetchData = async () => {
  2.     // const res = await $http.get('/api/v1/Home/1')
  3.     // console.log("测试数据返回了")
  4.     // console.log(res);
  6.     const res = await axios.get('/api/v1/Home/1')
  7.     console.log("测试数据返回了.")
  8.     console.log(res.data);
  9. }
  11. onMounted(() => {
  12.   fetchData()
  13. })

单独提出来api方法

其实现在调用api也可以不用做成全局的方式，更多的是使用把api请求的方法单独提出来写

首先在src文件夹下面创建好api，然后加入需要的js文件：

封装好需要调用api的方法：

  1. import request  from '@/common/request'
  3. /**
  4.  * @method getArticle 获取文章信息
  5.  * @param {*} data
  6.  * @returns
  7.  */
  8. export function getArticle(data) {
  9.    return request.get('/api/v1/Home/1',data)
  10. }

调用：
先引入封装的js:

  1. import { getArticle } from '@/api/article'

使用异步的方式调用方法：

  1. const fetchData = async () => {
  2.     const res = await getArticle({})
  3.     console.log("测试数据返回了..")
  4.     console.log(res);
  5. }
  7. onMounted(() => {
  8.   fetchData()
  9. })

使用then的方式调用

  1. const fetchData = () => {
  2.     getArticle({}).then(res => {
  3.           console.log("测试数据返回了...")
  4.           console.log(res)
  5.     })
  6. }
  8. onMounted(() => {
  9.   fetchData()
  10. })

如果返回的数据是这种格式

取list和total可以这种取：

  1. const fetchData = async () => {
  3.   const {
  4.     data: { list, total },
  5.   } = await getInquiryInfo({})
  7.   console.log("测试数据返回了..")
  8.   console.log(list);
  9.   console.log(total);
  10. }

完善请求封装

把请求封装修改为ts版本
  1. import axios from 'axios'
  2. import qs from 'qs'
  4. // vue3下的element-plus
  5. import { ElLoading, ElMessage } from 'element-plus'
  7. // 后台接口返回成功的状态码，需要根据自己的接口修改
  8. const successCode = 0
  10. // loading加载对象
  11. // let loadingInstance: any
  13. const loading = {
  14.     // loading加载对象
  15.     loadingInstance:null as any,
  16.     // 打开加载
  17.     open(loadtext: any) {
  18.         //if (this.loadingInstance === null) {
  19.         // 如果实例 为空，则创建
  20.         this.loadingInstance = ElLoading.service({
  21.             text: loadtext, // '加载中...', // 加载图标下的文字
  22.             // spinner: 'el-icon-loading', // 加载图标
  23.             background: 'rgba(0, 0, 0, 0.6)', // 背景色
  24.             customClass: 'loading' // 自定义样式的类名
  25.         })
  26.         //}
  27.     },
  28.     // 关闭加载
  29.     close() {
  30.         // 不为空时, 则关闭加载窗口
  31.         if (this.loadingInstance) {
  32.             this.loadingInstance.close()
  33.         }
  34.         // this.loadingInstance = null
  35.     }
  36. }
  38. axios.defaults.timeout = 300000 // 设置超时时间
  39. // 配置请求头数据格式
  40. // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  42. // 请求拦截器
  43. axios.interceptors.request.use(
  44.     (axiosconfig) => {
  45.         // 请求地址统一增加一个webapi，因为后台那个代理配置里边有加上webapi的前缀
  46.         //axiosconfig.url = "/webapi" + axiosconfig.url;
  48.         //从环境变量读取，线下访问接口增加webapi前缀，上线就不增加
  49.         // axiosconfig.url = process.env.VUE_APP_BASE_API + axiosconfig.url;
  50.         axiosconfig.url = '' + axiosconfig.url
  51.         // console.log("请求的地址2",axiosconfig.url)
  53.         // 测试token , 获取token的方法换成自己的写法即可
  54.         let token = "eyJhbGciOiJSUzI1NiIsImtpZCI"
  55.         axiosconfig.headers.Authorization = "Bearer " + token;
  57.         return axiosconfig
  58.     },
  59.     (err) => {
  60.         loading.close() // 关闭加载窗口
  61.         return Promise.reject(err)
  62.     }
  63. )
  65. // 响应拦截器
  66. axios.interceptors.response.use(
  67.     (res) => {
  68.         //console.log("统一响应了",res);
  69.         loading.close() // 关闭加载窗口
  71.         if (res.data.code !== successCode) {
  72.             ElMessage({
  73.                 message: res.data.msg,
  74.                 type: 'error'
  75.             })
  76.         }
  78.         // 如果token过期了就直接跳转到登录
  79.         // if (
  80.         //   (res.code === 401 || res.code === 500 || res.code === 403) &&
  81.         //   !sessionStorage.getItem("401show")
  82.         // ) {
  83.         //   // to re-login
  84.         //   sessionStorage["401show"] = true;
  85.         //   ElMessage.confirm("登录状态已过期", "登录提示", {
  86.         //     confirmButtonText: "重新登录",
  87.         //     cancelButtonText: "取消",
  88.         //     type: "warning",
  89.         //   })
  90.         //     .then(() => {
  91.         //       sessionStorage.clear("401show");
  92.         //       // 跳转到登录页
  93.         //       location.href = "/#/login?redirect=/school-dashboard#/zuxia/index";
  94.         //     })
  95.         //     .catch(() => {
  96.         //       sessionStorage.clear("401show");
  97.         //     });
  98.         // }
  100.         return res
  101.     },
  102.     (err) => {
  103.         loading.close() // 关闭加载窗口
  105.         console.log(err)
  107.         ElMessage({
  108.             message: err,
  109.             type: 'error'
  110.         })
  112.         return Promise.reject(err)
  113.     }
  114. )
  116. const request = {
  117.     get(url: any, data: any, loadtext: any="") {
  118.         // 判断有没有参数，有参数就把参数加上
  119.         if (data) {
  120.             url = url + '?' + qs.stringify(data)
  121.         }
  123.         if (loadtext && loadtext.length > 0) {
  124.             loading.open(loadtext) // 打开加载窗口
  125.         }
  126.         return new Promise((resolve, reject) => {
  127.             axios
  128.                 .get(url)
  129.                 .then(function (response) {
  130.                     // console.log("封装的方法数据回来了");
  131.                     // console.log(response)
  132.                     if (response.status === 200 && response.data.code === successCode) {
  133.                         resolve(response.data)
  134.                     } else {
  135.                         // 上面的判断要根据实际情况修改判断对哦，不然使用else里边的reject输出，虽然结果也能正确输出，但是浏览器上会提示Uncaught (in promise)，也不能继续正确的向下执行了。
  136.                         reject(response.data)
  137.                     }
  138.                 })
  139.                 .catch((e) => {
  140.                     reject(e)
  141.                 })
  142.         })
  143.     },
  145.     post(url: any, data: any, loadtext: any="") {
  146.         if (loadtext && loadtext.length > 0) {
  147.             loading.open(loadtext) // 打开加载窗口
  148.         }
  150.         return new Promise((resolve, reject) => {
  151.             axios
  152.                 .post(url, data)
  153.                 .then(function (response) {
  154.                     if (response.status === 200 && response.data.code === successCode) {
  155.                         resolve(response.data)
  156.                     } else {
  157.                         reject(response.data)
  158.                     }
  159.                 })
  160.                 .catch((e) => {
  161.                     reject(e)
  162.                 })
  163.         })
  164.     },
  166.     put(url: any, data: any, loadtext: any="") {
  167.         if (loadtext && loadtext.length > 0) {
  168.             loading.open(loadtext) // 打开加载窗口
  169.         }
  171.         return new Promise((resolve, reject) => {
  172.             axios
  173.                 .put(url, data)
  174.                 .then(function (response) {
  175.                     if (response.status === 200 && response.data.code === successCode) {
  176.                         resolve(response.data)
  177.                     } else {
  178.                         reject(response.data)
  179.                     }
  180.                 })
  181.                 .catch((e) => {
  182.                     reject(e)
  183.                 })
  184.         })
  185.     },
  186.     delete(url: any, data: any, loadtext: any="") {
  187.         if (loadtext && loadtext.length > 0) {
  188.             loading.open(loadtext) // 打开加载窗口
  189.         }
  191.         return new Promise((resolve, reject) => {
  192.             axios
  193.                 .delete(url, data)
  194.                 .then(function (response) {
  195.                     if (response.status === 200 && response.data.code === successCode) {
  196.                         resolve(response.data)
  197.                     } else {
  198.                         reject(response.data)
  199.                     }
  200.                 })
  201.                 .catch((e) => {
  202.                     reject(e)
  203.                 })
  204.         })
  205.     }
  206. }
  208. export default request
在ts中使用封装的请求也是一样的

引入封装的request之后使用方法如下。其实都是一样的，就是要注意一下ts中的类型检查，类型不确定时使用可以使用any,unknown等类型来处理，或者使用类型断言。

  1. const getTasksList = async () => {
  3.     const result: any = await request.get('/growing/api/Tasks/GetTasksPage', state.pageParam, "请求")
  4.     console.log(result)
  5.     state.tasksList = result.data.data
  7.     // 请求的api地址，以及返回数据的格式自己根据自己的修改
  8.     // request.get('/education/api/Feedback/GetSchools', state.pageParam).then((res: any) => {
  9.     //     console.log('获取任务')
  10.     //     console.log(res)
  11.     //     state.tasksList = res.data.data
  12.     // })
  13. }

vue3的一个模板vue3-admin-template里边自带封装的request请求

贴一下他这个封装的代码,也可以考虑借鉴：

  1. import axios from 'axios'
  2. import { ElMessage, ElMessageBox } from 'element-plus'
  3. import { useUserStore } from '@/store/user'
  4. import { getCookies } from '@/utils/storage'
  5. import defaultSettings from '@/settings'
  7. // 业务请求
  8. const request = axios.create({
  9.   baseURL: defaultSettings.isMockData ? '' : import.meta.env.VITE_APP_BASE_API, // url = base url + request url
  10.   // withCredentials: true, // send cookies when cross-domain requests
  11.   timeout: 5000 // request timeout
  12. })
  14. // const request = axios.create({
  15. //   baseURL: "", // url = base url + request url
  16. //   // withCredentials: true, // send cookies when cross-domain requests
  17. //   timeout: 5000 // request timeout
  18. // })
  20. // request interceptor
  21. request.interceptors.request.use(
  22.   (config) => {
  23.     // do something before request is sent
  24.     const userStore = useUserStore()
  26.     if (userStore.token) {
  27.       // let each request carry token
  28.       // ['X-Token'] is a custom headers key
  29.       // please modify it according to the actual situation
  30.       config.headers['X-Token'] = getCookies('Fanqie-Token')
  31.     }
  32.     return config
  33.   },
  34.   (error) => {
  35.     // do something with request error
  36.     console.log(error) // for debug
  37.     return Promise.reject(error)
  38.   }
  39. )
  41. // response interceptor
  42. request.interceptors.response.use(
  43.   /**
  44.    * If you want to get http information such as headers or status
  45.    * Please return  response => response
  46.    */
  48.   /**
  49.    * Determine the request status by custom code
  50.    * Here is just an example
  51.    * You can also judge the status by HTTP Status Code
  52.    */
  53.   (response) => {
  54.     const res = response.data
  55.     // if the custom code is not 20000, it is judged as an error.
  56.     if (res.code !== 20000 && res.code!=200) {
  57.       ElMessage({
  58.         message: res.message || 'Error',
  59.         type: 'error',
  60.         duration: 5 * 1000
  61.       })
  63.       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  64.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  65.         // to re-login
  66.         ElMessageBox.confirm(
  67.           'You have been logged out, you can cancel to stay on this page, or log in again',
  68.           'Confirm logout',
  69.           {
  70.             confirmButtonText: 'Re-Login',
  71.             cancelButtonText: 'Cancel',
  72.             type: 'warning'
  73.           }
  74.         ).then(() => {
  75.           const userStore = useUserStore()
  76.           userStore.resetToken.then(() => {
  77.             location.reload()
  78.           })
  79.         })
  80.       }
  81.       return Promise.reject(new Error(res.message || 'Error'))
  82.     } else {
  83.       return res
  84.     }
  85.   },
  86.   (error) => {
  87.     console.log('err' + error) // for debug
  88.     ElMessage({
  89.       message: error.message,
  90.       type: 'error',
  91.       duration: 5 * 1000
  92.     })
  93.     return Promise.reject(error)
  94.   }
  95. )
  97. /**
  98.  * 用于请求 gitee 的数据
  99.  */
  100. const requestA = axios.create({
  101.   baseURL: import.meta.env.VITE_APP_GITEE_BASE_API, // url = base url + request url
  102.   timeout: 60 * 1000
  103. })
  105. requestA.interceptors.request.use(
  106.   (config) => {
  107.     return config
  108.   },
  109.   (error) => {
  110.     console.log(error)
  111.     return Promise.reject(error)
  112.   }
  113. )
  115. requestA.interceptors.response.use(
  116.   (response) => {
  117.     const { data, status, statusText } = response
  118.     if (status === 200) {
  119.       return data
  120.     } else {
  121.       ElMessage({
  122.         message: statusText || 'Error',
  123.         type: 'error',
  124.         duration: 5 * 1000
  125.       })
  126.       return false
  127.     }
  128.   },
  129.   (error) => {
  130.     console.log('err' + error)
  131.     ElMessage({
  132.       message: error.message,
  133.       type: 'error',
  134.       duration: 5 * 1000
  135.     })
  136.     return Promise.reject(error)
  137.   }
  138. )
  140. export { request, requestA }

他这个封装的api接口请求示例：
也是像上面说的那样单独提出来一个文件写的

  1. import { request } from '@/utils/request'
  3. /**
  4.  * @method addUserLogin 登录
  5.  * @param {*} data
  6.  * @returns
  7.  */
  8. export function addUserLogin(data) {
  9.   return request({
  10.     url: '/user-login',
  11.     method: 'post',
  12.     data
  13.   })
  14. }
  16. /**
  17.  * @method addUserInfo 用户信息
  18.  * @param {*} data
  19.  * @returns
  20.  */
  21. export function addUserInfo(data) {
  22.   return request({
  23.     url: '/user-info',
  24.     method: 'post',
  25.     data
  26.   })
  27. }

调用方法和前面的一样就不在累述了


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue3，vue组件，props给一个对象参数。vue组件间传参数vue父组件给子组件传参数。组件参数类型。父组件调用子组件的方法。vue组件事件监听，给子组件传递方法，子组件调用父组件方法
[TOC]组件可以使用props给组件传值，可以同时传递多个，可以是任意类型，比如字符串或者对象。 下面是个简单的例子： &lt...

vue3最基础的数据加载，表格table
vue3表格加载一点静态数据 <template> <el-table :data="tableData" style="width: 100%&quot...

vue3 Element Plus 表单输入框放到一行
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域...

vue3 Element ui Plus 表格 分页，vue3 el-pagination分页
其实就是el-pagination控件的使用而已 <template> <div> <el-table :data="tableData" ...

vue触发a标签的点击事件。vue3 dom操作 触发点击事件 。文件选择库只会触发一次change事件的问题
[TOC]vue触发a标签的点击事件直接操作dom节点的方式比较简单 <button @click="handleBtnClick">点击按钮&...

vue3 ref的使用多个ref的使用。通过ref触发点击事件
多个ref获取的方法可以使用一样的,通过变量名来区分就行了 const vabUploadRef = ref() const multipleTableRef = ref() ...

vue elementui，vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传
比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单，el-upload绑定一个data即可...

vue，vue3 打开新页面，页面跳转。vue跳转到一个新页面。vue路由传参，vue3路由传参，vue3 获取路由参数
[TOC]VUE页面跳转本地页面跳转 goApplicationCenter() { //进行页面跳转 let path = "/application-center&quo...

vuevue3组件封装，vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果，一块一块的grid布局效果
[TOC]vue封装组件的简单模板贴一个简单模板方便自定义组件的时候直接复制 <template> <div class="app...

.net6 Signalr+vue3 的运用（上）
.net6 Signalr+Vue3 的运用（上）[TOC] 什么是 SignalR?ASP.NET Core SignalR 是一个开放源代码库，可用于简化向应用添加...

.net6 Signalr+vue3 的运用（下）
.net6 Signalr+Vue3 的运用（下）[TOC] 上篇链接：https://www.tnblog.net/hb/article/details/7961SignalR 中的用户 Sig...

.net6 Signalr+vue3 配合Ingress Nginx的运用
.net6 Signalr+Vue3 配合Ingress Nginx的运用[TOC] 结合上篇：https://www.tnblog.net/hb/article/details/7963 项目打...

vue3 Element Plus 表格使用vue3常用界面搭配。vue3基础模板使用
一个简单的表格加时间搜索界面效果如下： 代码如下： <template> <div class="app-container"&g...

vue3 如何加prototype。vue3使用globalProperties
在2.X版本中创建一个vue 实例是通过 new Vue()来实现的，到了3.X中则是通过使用createApp这个 API返回一个应用实例，并且可...