精华内容
下载资源
问答
  • 2021-03-09 16:58:03

    参考原文:https://www.cnblogs.com/fsg6/p/13204365.html

    axios.create()是添加了自定义配置的新的axios

    例如:
    用axios发送请求:

    axios({
        method:'POST',
        url:'http://localhost:8000/login',
        data
    })
    用axios.create()创建一个新的axios发请求:

    cosnt requset = axios.create({
        //基础路径
        baseURL:'http://localhost:8000/'
    })

    requset({
        method:'POST',
        url:'/login',
        data
    })

    好处:、
    1.可以简化路径写法
    2.当基础路径发生变化时方便修改,有利于维护
    ————————————————
    版权声明:本文为CSDN博主「jingshenmeizi」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_37418556/article/details/107506980

    更多相关内容
  • 目录axios是什么axios特点axios常用语法axios安装axios简单使用默认get请求postputdeleteaxios难点语法axios.create(config) 对axios请求进行二次封装axios的处理链流程 拦截器拦截器简单使用多个拦截器取消请求1....

    axios是什么

    1. 前端最流行的 ajax请求库
    2. react/vue官方推荐使用axios发ajax请求
    3. 文档 https://github.com/axios/axios

    axios特点

    1. 基于promise的异步ajax请求库
    2. 浏览器端/node端都可以使用
    3. 支持请求/响应拦截器
    4. 支持请求取消
    5. 请求/响应数据转换
    6. 批量发送多个请求

    axios中文文档

    http://www.axios-js.com/

    axios常用语法

    namvalue
    axios(config)通用/最本质的发任意类型请求的方式
    axios(url[,config])可以只指定url发get请求
    axios.request(config)等同于axios(config)
    axios.get(url[,config])发get请求
    axios.delete(url[,config])发delete请求
    axios.post(url[,data,config])发post请求
    axios.put(url[,data,config])发put请求
    axios.defaults.xxx请求非默认全局配置
    axios.interceptors.request.use()添加请求拦截器
    axios.interceptors.response.use()添加响应拦截器
    axios.create([config])创建一个新的axios(他没有下面的功能)
    axios.Cancel()用于创建取消请求的错误对象
    axios.CancelToken()用于创建取消请求的token对象
    axios.isCancel()是否是一个取消请求的错误
    axios.all(promise)用于批量执行多个异步请求

    axios安装

    npm install axios
    

    vue项目使用
    在main.js

    import axios from 'axios'
    Vue.prototype.$ajax = axios
    

    html 直接导入就行了

    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    

    axios简单使用

    默认get请求

    // 配置默认基本路径
    axios.defaults.baseURL = 'http://localhost:3000'
    
    // 默认get请求
    axios({
    	url:"/posts",
    	params:{
    		id:1
    	}
    }).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    

    post

    // post请求
    axios.post("/posts",{id:1}).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    
    // 或
    
    axios({
    	url:"/posts",
    	method:'post'
    	data:{
    		id:1
    	}
    }).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    

    put

    axios.put("/posts/4",{
          "title": "json-server---1",
          "author": "typicode",
        }).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    
    // 或
    axios({
    	url:"/posts",
    	method:'put '
    	data:{
          "title": "json-server---1",
          "author": "typicode",
        }
    }).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    

    delete

    axios.delete("/posts/4",{
          "title": "json-server---1",
          "author": "typicode",
        }).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    
    // 或
    axios({
    	url:"/posts",
    	method:'delete'
    	data:{
    		id:1
    	}
    }).then(res=>{
    	console.log(res)
    },err=>{
        console.log(err)
    })
    

    axios难点语法

    axios.create(config) 对axios请求进行二次封装

    1. 根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
    2. 新的 axios 只是没有 取消请求批量请求 的方法,其它所有语法都是一致的
    3. 为什么要这种语法?
      1. 需求,项目中有部分接口需要的配置与另一部分接口的配置不太一样
      2. 解决:创建2个新的 axios ,每个都有自己的配置,分别对应不同要求的接口请求中

    简单使用

    const instance = axios.create({
       baseURL:"http://localhost:3000"
    })
    
    // 使用instance发请求
    instance({
        url:"/posts"
    })
    
    // 或
    instance.get("/posts")
    

    在这里插入图片描述
    同时请求 多个端口号

    const instance = axios.create({
        baseURL:"http://localhost:3000"
    })
    
    const instance2 = axios.create({
        baseURL:"http://localhost:4000"
    })
    
    // 同时请求 端口号 3000 4000
    
    // 使用instance发请求
    instance({
        url:"/posts"
    })
    
    // 使用instance2发请求
    instance2({
        url:"/posts"
    })
    

    axios的处理链流程 拦截器

    拦截器简单使用
    // 添加请求拦截器
    axios.interceptors.request.use(config=>{
    	// config 请求配置
    	
    	// 可用于
    	// 发送网络请求时,在界面显示一个请求的同步动画
    	// 某些请求(比如登录(token))必须携带一些特殊的信息
    	
    	// 请求成功拦截
        console.log("请求拦截器")
        return config
    },err=>{
    	// 请求失败拦截
        return Promise.reject(err)
    })  
    
    // 添加响应拦截器
    axios.interceptors.response.use(res=>{
    	// res 响应结果
    	// 响应拦成功拦截
        console.log("响应拦截器")
        return res
    },err=>{
    	// 响应拦失败拦截
        return Promise.reject(err)
    })  
    
    console.log("开始请求")
    axios.get("http://localhost:3000/posts")
    .then(res=>{
        console.log("res:",res)
        console.log("请求结束")
    })
    

    在这里插入图片描述

    多个拦截器

    请求拦截器后添加先执行

    // 添加请求拦截器
    axios.interceptors.request.use(config=>{
        console.log("请求拦截器")
        return config
    },err=>{
        return Promise.reject(err)
    })  
    
    axios.interceptors.request.use(config=>{
        console.log("请求拦截器--------2")
        return config
    },err=>{
        return Promise.reject(err)
    })  
    
    axios.interceptors.request.use(config=>{
        console.log("请求拦截器--------3")
        return config
    },err=>{
        return Promise.reject(err)
    })  
    
    
    // 添加响应拦截器
    axios.interceptors.response.use(res=>{
        console.log("响应拦截器")
        return res
    },err=>{
        return Promise.reject(err)
    })  
    
    axios.interceptors.response.use(res=>{
        console.log("响应拦截器---------2")
        return res
    },err=>{
        return Promise.reject(err)
    }) 
    
    axios.interceptors.response.use(res=>{
        console.log("响应拦截器----------3")
        return res
    },err=>{
        return Promise.reject(err)
    })
    
    console.log("开始请求")
    axios.get("http://localhost:3000/posts")
    .then(res=>{
        console.log("res:",res)
        console.log("请求结束")
    })
    

    在这里插入图片描述

    取消请求

    1. 基本流程
    配置 cancelToken 对象
    缓存用于取消请求的 cancel 函数
    在后面特定时机调用 cancel 函数取消请求
    在错误回调中判断如果 error 是cancel ,做相应处理
    
    2. 实现功能

    node运行server.js
    安装node和express (npm install express)

    var http = require("http");
    
    var express = require("express")
    // var server = http.createServer();
    var app = express()
    
    // node跨域设置
    app.all("*",function(req,res,next){
        //设置允许跨域的域名,*代表允许任意域名跨域
        res.header("Access-Control-Allow-Origin","*");
        //允许的header类型
        res.header("Access-Control-Allow-Headers","content-type");
        //跨域允许的请求方式 
        res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
        if (req.method.toLowerCase() == 'options')
            res.send(200);  //让options尝试请求快速结束
        else
            next();
    })
    
    
    app.get('/',function(res,req){
        console.log("获取客户端请求",res);
        // 延迟响应 方便测试取消接口
        setTimeout(function(){
            req.end("延迟响应 方便测试取消接口"); //响应客户数据
        },5000)
        
    })
    
    app.listen(4000,function(){
        console.log("服务器启动成功,可以通过 http://127.0.0.1:4000 进行访问")
    })
    

    在cmd窗口

    node server.js
    

    调用接口测试
    axios.isCancel(err) //判断错误是否 是取消请求导致的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    </head>
    <body>
        <script>
            let cancel;
    
            // axios({
            //     url:"http://localhost:4000",
            //     cancelToken:new axios.CancelToken(function(c){
            //         cancel = c
            //     })
            // })
            // 或
    
            axios.get("http://localhost:4000",{
                cancelToken:new axios.CancelToken(function(c){
                    // c 用于取消当前请求的函数
                    cancel = c
                })
            })
            .then(res=>{
                console.log("res:",res)
                cancel = null //请求完成,清空cancel
            },err=>{
                cancel = null 
                if(err.constructor.name === 'Cancel'){ //是取消请求导致的errer
                    console.log("取消请求导致error:",err)
                }else{
                    console.log("err:",err)
                }
    			// 或
                // axios.isCancel(err) //判断错误是否 是取消请求导致的
            });
    
            setTimeout(function(){
                if(typeof(cancel) === 'function'){
                    cancel('强制取消了请求')
                }else{
                    console.log("没有可取消的请求")
                }
            },2000)
        </script>
    </body>
    </html>
    

    正常请求
    在这里插入图片描述
    取消接口

    在这里插入图片描述

    在 请求拦截器里面统一添加取消请求
    axios.interceptors.request.use(res=>{
      	res['cancelToken'] = new axios.CancelToken(function(c){
            cancel = c
        })
        return res
    },err=>{
        return Promise.reject(err)
    }) 
    
    在 响应拦截器里面统一添加 处理取消请求
    axios.interceptors.response.use(res=>{
      
        return res
    },err=>{
    	if(axios.isCancel(err)){
    		// 中断promise链接
    		return new Promise(()=>{})
    	}else{
    		// 把错误继续向下传递
        	return Promise.reject(err)
    	}
    }) 
    
    代码简化 实现上一个接口还未响应 下一个接口开始请求,把上一个接口取消
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    </head>
    <body>
        <script>
            let cancel;
    
            axios.interceptors.request.use(config=>{
                // 实现上一个接口还未响应  下一个接口开始请求,把上一个接口取消
                if(typeof(cancel) === 'function'){
                    cancel('强制取消了请求')
                }
                config['cancelToken'] = new axios.CancelToken(function(c){
                    cancel = c
                })
                return config
            },err=>{
                return Promise.reject(err)
            }) 
    
            axios.interceptors.response.use(res=>{
                cancel = null 
                return res
            },err=>{
                cancel = null 
                if(axios.isCancel(err)){
                    console.log("取消上一个请求")
                    // 中断promise链接
                    return new Promise(()=>{})
                }else{
                    // 把错误继续向下传递
                    return Promise.reject(err)
                }
            })  
            function request(){
                axios.get("http://localhost:4000")
                .then(res=>{
                    console.log("res:",res)
                },err=>{
                    console.log("err:",err)
                });
            }
            
            request()
            request()
        </script>
    </body>
    </html>
    

    在这里插入图片描述

    请求前/后数据处理

    // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    transformRequest:[function (data, headers) {
        // 对 data 进行任意转换处理
        return data;
    }],
    
    // 在传递给 then/catch 前,允许修改响应数据
    transformResponse: [function (data) {
        // 对 data 进行任意转换处理
        return data;
    }],
    
    展开全文
  • 一:axios的基本使用,获取增删改 1.axios调用的返回值是Promise实例。 2.成功的值叫response,失败的值叫error。 3.axios成功的值是一个axios封装的response对象,服务器返回的真正数据在response.data中 ...

    一:axios的基本使用,获取增删改

            1.axios调用的返回值是Promise实例。

            2.成功的值叫response,失败的值叫error。

            3.axios成功的值是一个axios封装的response对象,服务器返回的真正数据在response.data中

            4.携带query参数时,编写的配置项叫做params

            5.携带params参数时,就需要自己手动拼在url中,如下按钮5

    <script src="./js/axios.min.js"></script>
    <body>
    <button id="btn1">点我获取所有人的信息</button>
    <br>
    <button id="btn2">点我获取某个人的信息</button>
    <input id="person_id" type="text" placeholder="请输入一个人的id">
    <br>
    <button id="btn3">点我添加某个人的信息</button>
    <input id="person_name" type="text" placeholder="请输入一个人的姓名">
    <input id="person_age" type="text" placeholder="请输入一个人的年龄">
    <br>
    <button id="btn4">点我更新某个人的信息</button>
    <input id="person_updata_id" type="text" placeholder="请输入要修改的id号">
    <input id="person_updata_name" type="text" placeholder="请输入更新后的名字">
    <input id="person_updata_age" type="text" placeholder="请输入更新后的年龄">
    <br>
    <button id="btn5">删除某人信息</button>
    <input id="person_dele_id" type="text" placeholder="请输入要删除的id">
    
    <script>
        const btn1 = document.getElementById('btn1')
        const btn2 = document.getElementById('btn2')
        const personId = document.getElementById('person_id')
        const btn3 = document.getElementById('btn3')
        const personName = document.getElementById('person_name')
        const personAge = document.getElementById('person_age')
        const personUpdataId = document.getElementById('person_updata_id')
        const personUpdataName = document.getElementById('person_updata_name')
        const personUpdataAge = document.getElementById('person_updata_age')
        const btn5 = document.getElementById('btn5')
        const personDeleId = document.getElementById('person_dele_id')
        // 1.获取所有人信息 --发送GET请求--  不携带参数
        btn1.onclick = async()=>{
            // 完整版
            axios({
                url:'http://localhost:5000/persons',   //请求地址
                method:'GET'     //请求方式
            }).then(
                // 学Promise时then里面的参数是value和reason,axios官方文档是 以下两个
                response => console.log('请求成功',response.data),
                error => console.log('请求失败',error)
            )
             
            // // 精简版   不能配置更多的属性
            // axios.get('http://localhost:5000/persons').then(
            //     response => console.log('请求成功',response.data),
            //     error => console.log('请求失败',error)
            // )
    
            // // 更精简版  只等待成功结果的版本 用 async 和 await
            // const res = await axios.get('http://localhost:5000/persons')
            // console.log(res.data)
        }
    
        // 2.获取某个人的信息 --发送GET请求-- 携带query参数  
        btn2.onclick = ()=>{
            // // 完整版
            // axios({
            //     url:'http://localhost:5000/person',
            //     method:'GET',
            //     params:{id:personId.value}   //此处写的是params,但携带的是query参数
            // }).then(
            //     response => {console.log('成功',response.data )},
            //     error => {console.log('失败',error)}
            // )
    
             // 精简版            带params
             axios.get('http://localhost:5000/person',{params:{id:personId.value}}).then(
                 response => {console.log('成功',response.data)},
                 error =>{console.log('失败')}
             )
    
        }
    
        // 3.添加某个人的信息 --发送POST请求-- 携带json编码参数 或 urlencoded编码   
        btn3.onclick = ()=>{
            // // 完整版
            // axios({
            //     url:'http://localhost:5000/person',
            //     method:'POST',
            //     data:{name:personName.value,age:personAge.value}
            // }).then(
            //     response => console.log('成功',response.data),
            //     error => console.log('失败',error)
            // )
    
            //精简版             不带data,直接写参数对象
            axios.post('http://localhost:5000/person',{name:personName.value,age:personAge.value}).then(
               response => console.log('成功',response.data),
               error => console.log('失败',error)
            )
    
        } 
    
        // 4.更新某个人的信息 --发送PUT请求-- 携带json编码参数 或 urlencoded编码
        btn4.onclick = () =>{
            // // 完整版
            // axios({
            //     url:'http://localhost:5000/person',
            //     method:'PUT',
            //     data:{id:personUpdataId.value,
            //           name:personUpdataName.value,
            //           age:personUpdataAge.value}
            // }).then(
            //     response => console.log('成功',response.data),
            //     error => console.log('失败')
    
            // )
            // 精简版
            axios.put('http://localhost:5000/person',{id:personUpdataId.value,name:personUpdataName.value,age:personUpdataAge.value}).then(
                response => console.log('成功',response.data),
                error => console.log('失败')  
            )
        }
    
        // 5.删除某个人的信息 --发送DELETE请求-- params参数没有对应的axios内置对象,我们要用模板字符串
        btn5.onclick = () =>{
            axios({
                url:`http://localhost:5000/person/${personDeleId.value}`,
                method:'DELETE',
                // params:{id:personDeleId.value}  这是错误的写法。。。不应该用params
            }).then(
                response => console.log('成功',response.data),
                error => console.log('失败')
            )
        }
    </script>
    </body>

    二:axios常用配置项和axios.create

                    axios.create(config)

                            1. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置

                            2. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的

                            3. 为什么要设计这个语法?

                                    需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样

     

    	<body>
    		<button id="btn">点我获取所有人</button><br/><br/>
    		<button id="btn2">点我获取测试数据</button><br/><br/>
    		<button id="btn3">点我获取笑话信息</button><br/><br/>
    
            
    		<script type="text/javascript" >
    			const btn = document.getElementById('btn')
    			const btn2 = document.getElementById('btn2')
    			const btn3 = document.getElementById('btn3')
    
                const axios2 = axios.create({
                    timeout : 3000,
                    // headers : {name:'yang'},   这台服务器不允许修改请求头headers,不是我代码的锅
                    baseURL : 'https://api.apiopen.top'
                })
    
                //给axios配置默认属性 , 所有方法的超时时间都设置为2秒,请求头都是atguigu,请求的url通用路径
    			axios.defaults.timeout = 2000
    			axios.defaults.headers = {school:'atguigu'}
    			axios.defaults.baseURL = 'http://localhost:5000'
                
                btn.onclick = ()=>{
    				axios({
    					url:'/persons', //请求地址
    					method:'GET',//请求方式
    					//params:{delay:3000},//配置query参数
    					//data:{c:3,d:3},//配置请求体参数(json编码)
    					//data:'e=5&f=6',//配置请求体参数(urlencoded编码)
    					//timeout:2000,//配置超时时间
    					//headers:{school:'atguigu'} //配置请求头
    					//responseType:'json'//配置响应数据的格式(默认值)
    				}).then(
    					response => {console.log('成功了',response.data);},
    					error => {console.log('失败了',error);}
    				)
    			}
    		
    			btn2.onclick = ()=>{
    				axios({
    					url:'/test1', //请求地址
    					method:'GET',//请求方式
    					//timeout:2000,//配置超时时间
    					//headers:{school:'atguigu'} //配置请求头
    				}).then(
    					response => {console.log('成功了',response.data);},
    					error => {console.log('失败了',error);}
    				)
    			}
    			
                // 上面我们统一设置了 url 的开头为 'http://localhost:5000'
                // 但是我们下面的这个方法 url开头和默认设置的并不相同 ,此时用 axios.create方法重新创建一个axios2
                // 要配置在初始 axios 前面 
    			btn3.onclick = ()=>{
    				axios2({
    					url:'/getJoke',
                        method:'GET'
    				}).then(
                        response => {console.log('成功了',response.data);},
    					error => {console.log('失败了',error);}
                    )
    			}
    		</script>
    	</body>

    三:axios中的请求拦截器和响应拦截器

                    axios请求拦截器

                        1.是什么?       在真正发请求前执行的一个回调函数

                        2.作用:     对所有的请求做统一的处理:追加请求头、追加参数、界面loading提示等等

                   

                    axios响应拦截器

                        1.是什么?        得到响应之后执行的一组回调函数

                        2.作用:

                                若请求成功,对成功的数据进行处理

                                若请求失败,对失败进行统一的操作

    	<body>
    		<button id="btn">点我获取所有人</button><br/><br/>
    		<script type="text/javascript" >
    			const btn = document.getElementById('btn')
    
    			//请求拦截器
    			axios.interceptors.request.use((config)=>{
    				console.log('请求拦截器1执行了');
    				if(Date.now() % 2 === 0){   
                        //如果当前时间戳整除2,
    					config.headers.token = 'atguigu'
    				}
    				return config
    			})
    
    			//响应拦截器
    			axios.interceptors.response.use(
    				response => {
    					console.log('响应拦截器成功的回调执行了',response);
    					if(Date.now() % 2 === 0) return response.data
    					else return '时间戳不是偶数,不能给你数据'
    				},
    				error => {
    					console.log('响应拦截器失败的回调执行了');
    					alert(error);   //弹出出错信息
    					return new Promise(()=>{})   //中断promise链
    				}
    			)
    			
                // 只要成功的结果,不成功也会有提示。因为在上面的响应拦截器里面写了
    			btn.onclick = async()=>{
    				const result = await axios.get('http://localhost:5000/persons21')
    				console.log(result);
    			}
    		</script>
    	</body>

    四:axios中取消请求

    五:axios.all批量发送请求

    	<body>
    		<button id="btn">点我批量发送请求</button><br/><br/>
    		<script type="text/javascript" >
    			const btn = document.getElementById('btn')
    
    			btn.onclick = async()=>{
    				axios.all([
    					axios.get('http://localhost:5000/test1'),
    					axios.get('http://localhost:5000/test2?delay=3000'),
    					axios.get('http://localhost:5000/test3'),
    				]).then(
    					response => {console.log(response);},
    					error => {console.log(error);}
    				)
    			}
    		</script>
    	</body>

    展开全文
  • axios.create的使用

    千次阅读 2021-04-13 16:19:44
    axios.create()是添加了自定义配置的新的axios 1.用axios发送请求 axios({ method:'POST', url:'http://localhost:8080/login', data }) 2.用axios.create创建一个新的axios发请求 cosnt instance = axios....

    axios.create()是添加了自定义配置的新的axios

    1.用axios发送请求

    axios({
    	method:'POST',
    	url:'http://localhost:8080/login',
    	data
    })
    

    2.用axios.create创建一个新的axios发请求

    cosnt instance = axios.create({
        baseURL:'http://localhost:8080/' //基础路径
    })
    
    instance({
    	url: '/login',
        method: 'POST',
        data: res
    })
    // 1.可以简化路径写法 2.当基础路径发生变化时方便修改,有利于维护
    
    展开全文
  • axios.create 使用

    2020-11-04 20:55:49
    你可以创建一个拥有通用配置的axios实例 axios.creat([config]) 我们应该会遇到这样一个问题,...var instance = axios.create({ baseURL: 'https://s-domain.com/api/', timeout: 1000, headers: {'X-Custom-Heade
  • axios.create(config) 根据指定配置创建一个新的 axios, 也就就每个新 axios 都有自己的配置 新 axios 只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的 为什么要设计这个语法? (1) 需求: 项目中有部分...
  • axios.create( config ) 根据指定配置创建一个新的axios实例;也就是每个新的axios都有自己 新的配置; 有些接口的配置和一些接口的配置不一样 所以需要 创建2个新的axios 每个都有自己新的配置 分别应用到不同...
  • 自定义实例默认值 axios.create(config) 根据指定配置创建一个新的axios,也就就每个新 axios 都有自己的配置 新 axios只是没有取消请求和批量发请求的方法,其它所有语法都是一致的 为什么要设计这个语法? 需求...
  • 最开始学习的时候,一直不太理解axioscreate的用法,今天来大概聊聊 进入公司后,发现公司并不是用的axios去获取接口,而是对axios进行了一次封装,因为我们的项目比较庞大,接口并没有部署在同一台服务器上,在...
  • axios.create()

    千次阅读 2020-04-20 10:56:34
    request 库源码分析 有了上述基础后,我们再看 ...const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.request.use( config => { // 如果...
  • vue.cli项目封装全局axios,封装请求,封装公共的api和调用请求的全过程_jcat_李小黑的博客-CSDN博客_axios封装请求vue项目的前期配置封装axios实例封装APIhttps://blog.csdn.net/weixin_43216105/article/details/...
  • 在请求或响应被 then 或 catch 处理前拦截它们 ... axios.interceptors.request.use(config => { // 在发送请求之前做些什么 Toast.loading({ duration: 0, message: '加载中...', forbidClick: true, });
  • axios.interceptors.request.use(function(config){ //比如是否需要设置 token config.headers.token='wwwwwsdsdf' return config }) 1 2 3 4 5 2.响应了拦截器(在响应之后对数据进行一些处理) axios....
  • 浅谈axios.interceptors拦截器

    千次阅读 2022-04-23 15:48:42
    axios实现这个拦截器机制如下: 不难发现, 这其实就是一个顺序链表能实现的,把请求拦截器的函数推在前面, api请求的核心方法放在中间, 响应拦截器放在数组后面,遍历执行链表就实现了拦截器的顺序执行过程...
  • 排查:axios请求拦截器axios.interceptors.request.use里undefined报错
  • axios.create

    2020-03-13 23:44:45
    https://www.jianshu.com/p/ff5d2b55139a
  • 【学习之路】axiosaxios.CancelToken

    千次阅读 2022-02-08 14:18:16
    new axios.CancelToken(cancel=>{ // cancel是取消本次请的方法 if(xxx) { cancel() }else { // TODO } }) 一般用法 用于发出多个相同请求时,取消重复请求 使用场景 使用数组存放需要发送的请求,发...
  • axios并发请求
  • 我封装了axios,因为现在是本地开发,所以跨域了,需要配置proxyTable: <code class="language-javascript">proxyTable: { '/api': { target: 'http://localhost:80',...
  • 在学习axios时,对于defaults很是迷惑; 仔细阅读了axios的配置后,在学习defaults就会简单很多; 在axios配置中存在baseUrl,header等配置,每次做的axios时,不一定所有的配置都要自己写,这时候要做一个默认值...
  • axios.defaults.withCredentials = true; 但是cookie信息不能被浏览器保存下来. 虽然登陆接口返回了200, 但是登录实际上是无效的. 这时候登陆接口的一些信息: 原因 网上的文章提到: 如果要发送Cookie,Access-...
  • vue axios. this.$http this.axios this.$axios.

    千次阅读 2021-04-07 18:06:54
    一、在需要的页面引用 axios 安装axios包 npm install axios 引入使用axios import axios from "axios" 发送基本的请求 axios({ url:"http://api.github.com/users" }).then( (result) => { ...
  • const service = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? Url : '/api', timeout: 10000 // 请求超时时间 }); ``` 这么写开发环境下一切正常,但是打包之后因为proxy失效,请求...
  • axios.defaults.baseURL的三种配置方法

    千次阅读 2021-01-12 15:05:44
    本文介绍我在项目中使用axios切换生产环境和开发环境接口地址的三种配置 1.常规设置 在只需要配置单个或有限明确的接口域名时可以直接设置,在生产环境和开发环境切换时需手动更改 axios.defaults.baseURL=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,249
精华内容 10,899
关键字:

axios.create