zoukankan      html  css  js  c++  java
  • axios封装,统一不同请求方法时的调用方式

    import axios from 'axios'
    
    // 请求超时设置
    axios.defaults.timeout = 3000
    
    /*
     * 设置生产环境/开发环境下的请求基路径(需后台设置允许跨域)
     * 开发环境下的跨域,也可使用webpack的devServer来设置proxy代理的方式来解决
     */
    if(process.env.NODE_ENV === 'production') {
        axios.defaults.baseURL = 'http://127.0.0.1:5050/'
    }else if(process.env.NODE_ENV === 'development') {
        //设置开发环境下的请求基路径, 如果是使用了webpack的devServer,来设置了代理,那么此处就不需设置了
    }
    
    // 添加request拦截器
    axios.interceptors.request.use((config) => {
        // do something, 如接口请求的loading处理
        return config
    }, (error) => {
        return Promise.reject(error)
    })
    
    // 添加response拦截器
    axios.interceptors.response.use((response) => {
        // do something
        return response
    }, (error) => {
        return Promise.reject(error)
    })
    
    /**
     * @func
     * @desc axios 请求封装
     * @param {object} req - 请求接口需要的url,method,请求头等基础信息
     * @param {object} params - 请求接口需要请求的参数
     */
    
    const http = (req, params) => {
        return new Promise((resolve, reject) => {
            let para = {}
            if ((['get', 'delete', 'head', 'options'].indexOf(req.method) > -1)) {
                para = {
                    params: params || {}
                }
            }
            if ((['post', 'put', 'patch'].indexOf(req.method) > -1)) {
                para = {
                    data: params || {}
                }
            }
            axios({
                ...req,
                ...para
            }).then((response) => {
                if(response.status === 200) {
                    resolve(response)
                }else {
                    alert(response.data.message)
                }
            }).catch((error) => {
                reject(error)
            }).finally(() => {
    
            })
        })
    }
    
    // 定义所有接口请求的信息
    const url = {
        movie: {
            url: '/movie/query',
            method: 'get'
        },
        book: {
            url: '/book/query',
            method: 'get'
        }
    }
    
    export {
        http,
        url
    }
    
    /**
     * 使用方式示例:
        http(url.movie).then((res) => {
            this.result = res.data.info
        })  
    */
    

    说明:实质的封装从const http开始,请求基路径设置的部分,暂时可以忽略,后面会单独对环境变量process.env.NODE_ENV进行分析实践和记录。 https://www.cnblogs.com/chaoyueqi/p/11232844.html

    以上代码的封装基础为axios,版本为^0.19.0,https://www.npmjs.com/package/axios

  • 相关阅读:
    如何卸载Mysql
    netty4.1.32 pipeline的添加顺序和执行顺序
    protobuf 在win10系统如何编译jar包
    java swing 的各种布局layout
    一些大神的代码功底方面的文章
    图解ByteBuffer
    Eclipse 高亮显示选中的相同变量
    Java synchronized详解(java 线程同步)
    一篇非常全面的 《单例模式》 的讲解的文章
    java中ThreadLocalRandom类和Random类的使用
  • 原文地址:https://www.cnblogs.com/chaoyueqi/p/11175843.html
Copyright © 2011-2022 走看看