• Vue-cli3 axios路由拦截 并使用


    1.安装axios (在项目中)

    npm i axios
    

      

    2.创建axios.intercept.js  内容如下

    // 配置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

    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.使用 封装好的 接口请求

    import {UserRequest} from "../../../../apis/UserRequest"; // 导入刚才写的UserRequest.js
    
    在组件中使用
    export default {
            name: "app-invoicing-record",
            created(){
               // 使用
               UserRequest.queryUsers({id: 1234}).then(res=>{});
            }
    }    
    

      

  • 相关阅读:
    011-通过网络协议解析网络请求-DNS-ARP-TCPIP
    010-HTTP协议
    009-DNS域名解析系统
    008-ICMP协议(网络控制文协议)
    007-IP报文协议
    007-排序算法-堆排序
    006-排序算法-希尔排序
    007-Linux 查看端口
    005-排序算法-归并排序
    004-排序算法-选择排序
  • 原文地址:https://www.cnblogs.com/MainActivity/p/12097199.html
Copyright © 2020-2023  润新知