zoukankan      html  css  js  c++  java
  • axios实例对象使用 与 拦截器

    import axios from 'axios'
    // 导出request方法
    export function request(config, success, failure){
        //1,创建axios实例
        // 为什么要实现axios的实例来创建请求,而不是使用全局的axios
        // 因为可能一个项目可以有多个域的请求,那么一个全局的axios就无法满足要求了
        // 根据不用的模块创建不同的axios实例
        const instance = axios.create({
            // 请求时会拼接baseurl
            baseURL: 'http://www.mg.com',
            // 超时毫秒数
            timeout: 1000
        })
    
        // 2,axios的拦截器
        // 2.1,请求拦截的作用
        instance.interceptors.request.use(config => {
            console.log(config)
            // 1.比如config中的一些信息不符合服务器的要求
    
            // 2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标
    
            // 3.某些网络请求,必须携带一些特殊的信息
    
            // 放行
            return config
        }, err => {
            // 一般网络异常之类的错误才会进入这里
            console.log(err)
        })
        // 2.2,响应拦截
        instance.interceptors.response.use(res => {
            console.log('响应成功',res)
    
            // 放行
            return res.data
        }, err => {
            // 返回响应状态码错误时进入
            console.log('响应失败',err)
        }) 
        // 发送真正的网络请求-返回promise
        return instance(config)
    }

     调用:

    request({
                url:'/swiper'
            }).then(res => {
                console.log('res',res)
            }).catch(err => {
                console.log('err',err)
            })
  • 相关阅读:
    题解-FJOI2014 树的重心
    题解-CF1307G Cow and Exercise
    题解-SHOI2005 树的双中心

    【转载】SVN使用教程总结
    Fastcgi、CGI 是什么
    通过js或jq增加的代码,点击事件或其他一些事件不起作用时
    js闭包讲解
    PHP 程序员危机(转载)
    浏览器 User-Agent相关知识
  • 原文地址:https://www.cnblogs.com/cl94/p/12489742.html
Copyright © 2011-2022 走看看