Vue-cli3 axios路由拦截 并使用
1.安装axios (在项目中)
1 | npm i axios |
2.创建axios.intercept.js 内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | // 配置axios拦截器 import axios from 'axios' ; import store from '../store' ; // 追加token // 创建axios实例 const service = axios.create({ // baseURL: process.env.VUE_APP_URL, // api 的 VUE_APP_URL timeout: 50000 // 请求超时时间 }); // request拦截器,在请求之前做一些处理 service._requestCount = 0; // 接口请求累加 service.interceptors.request.use( config => { service._requestCount++; store.commit( 'handleLoading' , true ); // 接口请求loading return config }, error => { console.log(error) // for debug Promise.reject(error) } ) // response 拦截器,数据返回后进行一些处理 service.interceptors.response.use( response => { service._requestCount--; if (service._requestCount<=0){ // 如果接口请求累加值小于0 那么关闭loading store.commit( 'handleLoading' , false ); } const res = response.data; return res; }, error => { service._requestCount--; if (service._requestCount<=0){ store.commit( 'handleLoading' , false ); } Promise.reject( '异常' , error); } ) export default service |
3.使用拦截器
创建接口请求模块 例如 UserRequest.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import service from './axios.intercept' ; // 导入刚才 创建的拦截器 const interfaceAddress = process.env.VUE_APP_URL + '/user' ; // 全局请求地址 const requestInterfaceList = { queryUsers: interfaceAddress + '/users' , // 具体接口地址 queryUserDetails: interfaceAddress + '/users/details' } export const UserRequest { queryUsers( params ){ const sendObj = {}; ({ pageNo: sendObj.pageNo, // 页码 pageSize: sendObj.pageSize, // 每页条数 shopCodeOrName: sendObj.shopCodeOrName, // 网点code或名称关键字 } = params ); return service({ url: requestInterfaceList.queryUsers, method: 'get' , params : sendObj }) } } |
4.使用 封装好的 接口请求
1 2 3 4 5 6 7 8 9 10 | import {UserRequest} from "../../../../apis/UserRequest" ; // 导入刚才写的UserRequest.js 在组件中使用 export default { name: "app-invoicing-record" , created(){ // 使用 UserRequest.queryUsers({id: 1234}).then(res=>{}); } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步