zoukankan      html  css  js  c++  java
  • vue中局部封装axios

    Vue中局部配置axios

    'use strict'
    import axios from 'axios';
    import {
        Loading
    } from 'element-ui';
    export const http = (config) => {
        const instance = axios.create({
            baseUrl: '服务器地址',
            timeout: '设置过期时间'
        })
        // 自定义动画函数
        let loading;
        let startLoading = () => {
            /* 开场动画 */
            loading = Loading.service({
                lock: true,
                text: '正在加载...客官请稍等...',
                background: 'rgba(0,0,0,.6)'
            })
        };
        let endLoading = () => {
            /* 结束动画 */
            loading.close()
        };
    
    // 设置请求拦截
    instance.interceptors.request.use(
        function (config) {
            // Do something before request is sent
            startLoading()
            return config
        },
        function (error) {
            // Do something with request error
            return Promise.reject(error)
        }
    )
    
    // 设置响应拦截
    instance.interceptors.response.use(
        function (response) {
            // Do something with response data
            endLoading()
            return response
        },
        function (error) {
            // Do something with response error
            endLoading()
            return Promise.reject(error)
        }
    )
    
    return instance(config)
    

    }
    // GET 实例
    http({
    url: '127.0.0.1:8080/system/category',
    method: 'GET',
    params: {
    data: 'get请求传递的参数'
    }
    }).then(res => {
    console.table(res)
    })
    .catch(err => {
    console.log(err)
    })
    // POSt 实例
    http({
    url: '127.0.0.1:8080/system/user',
    method: 'POST',
    data: {
    userName: '',
    password: ''
    }
    }).then(res => {
    console.table(res)
    })
    .catch(err => {
    console.log(err)
    })

  • 相关阅读:
    AjaxControlToolKit(整理)三.......(35个控件)简单介绍
    C#多线程学习
    《深入浅出WPF》视频列表
    【Redis】Redis功能及性能
    MySQL性能优化
    【Redis】Redis常用命令
    php项目相关资源
    JAVA基础知识总结:十一
    JAVA基础知识总结:九
    JAVA基础知识总结:十
  • 原文地址:https://www.cnblogs.com/korea/p/11190670.html
Copyright © 2011-2022 走看看