发布于2022-12-03 15:13 阅读(1946) 评论(0) 点赞(20) 收藏(0)
提示:这里可以添加本文要记录的大概内容:
提示:以下是本篇文章正文内容,下面案例可供参考
axios.interceptors.request.use( function ( config ) { return config })
这个方法的参数是一个函数,发送请求之前就会执行这个函数,函数里面的参数就是执行这个函数拦截到的配置对象config
答:可以发起请求之前,做一个拦截,把数据(参数,配置…)做了处理再发送请求。
axios.defaults.baseURL = '路由接口的根地址' // 假设每个接口都有一个固定的参数 // pageSize : 固定为2个 // 可以发起请求之前,做一个拦截,把数据(参数,配置...)做了处理再发送请求 // 请求拦截 // 参数是一个函数,发送请求之前就会执行这个函数,它的参数就是拦截到的配置对象 axios.interceptors.request.use(function(config){ console.log(config) // config 就是配置对象 // 在这里可以修改config // 比如添加固定的参数 config.params = { pageSize: 3 } return config; // 返回配置对象, 不返回就没有任何参数了 }) axios.get('/hot',{ params: { pageSize: 2 } }).then(res=>{ console.log(res.data) }) axios.get('/soon').then(res=>{ console.log(res.data) })
我们打印一下config
我们可以看到,在config属性中添加了params属性,并且单纯的请求方法中传的参数无效,但是请求拦截中传递的参数有效
axios.defaults.baseURL = '接口路由地址' 一 手工拼接的方式 // axios.interceptors.request.use(function(config){ // // {type:'NBA',size:5,page:3} --> 'type=NBA&size=5&page=3' // // console.log(config.data) // let str = ''; // for(let item in config.data){ // // console.log(item) key // // console.log(config.data[item]) value // str += item+'='+config.data[item]+'&' // } // // console.log(str.slice(0,-1)) // str = str.slice(0,-1) // 去掉最后一个& // config.data = str // 拼接好的str赋值给config.data // return config; // }) // 写对象的参数,对我们开发会友好一点 // 我们就可以用请求去处理: 把对象转成表单类型的字符串 axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{ console.log(res.data) })
// 二 使用 URLSearchParams的方式实现 axios.defaults.baseURL = '接口路由地址' axios.interceptors.request.use(function(config){ // 1.创建URLSearchParams 实例 let pData = new URLSearchParams(); // 2. 遍历参数对象 for(let item in config.data){ // 3. 调用append() // 参数1:key 前面的值= // 参数2:value =后面的值 pData.append(item,config.data[item]) } //params的结果就是拼接好的 表单类型参数的字符串 // console.log(params.toString()) config.data = pData return config }) // 写对象的参数,对我们开发会友好一点 // 我们就可以用请求去处理: 把对象转成表单类型的字符串 axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{ console.log(res.data) })
import axios from 'axios';
import qs from 'qs'
// 1.创建实例
const myaxios = axios.create({
baseURL: '请求路由地址'
})
// 请求拦截
myaxios.interceptors.request.use(function(config){
// 使用qs 来处理post的参数
config.data = qs.stringify(config.data)
return config
})
axios.interceptors.response.use( function ( res ) { return res } )
这个方法的参数是一个函数,请求成功之前后就会执行这个函数,函数里面的参数就是执行这个函数拦截到的结果数据
答:在请求成功之后,对数据有固定处理方式,就可以在响应拦截里面做。比如直接返回data,减少返回数据获取的代码量;还有一些状态的固定处理,不同的后端,他们代码风格可能是不一样。有些可能是用code 表示状态 eg:20000代表成功 50002没有权限 …。还有些用status表示状态, eg: success 代表成功, fail代表失败,只能要是后端代码风格确定了,这些状态通常是不会变的了。比如: 返回的请求失败的状态码,那就可以做一个通用的处理,给一个弹框提示。
axios.defaults.baseURL = '路由接口地址' // 响应拦截 axios.interceptors.response.use(function(res){ // console.log(res) if(res.data.code == '20000'){ return res.data }else if(res.data.code == '50002') { alert('没有权限') return res }else { alert('请求出错') return res } }) axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{ console.log(res) })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script type="text/javascript"> axios.defaults.baseURL = '请求路由地址' axios.interceptors.request.use(function(config){ let params = new URLSearchParams(); for(let item in config.data){ params.append(item,config.data[item]) } config.data = params return config }) // 响应拦截 axios.interceptors.response.use(function(res){ // console.log(res) if(res.data.code == '20000'){ return res.data }else if(res.data.code == '50002') { alert('没有权限') return res }else { alert('请求出错') return res } }) axios.post('/news', {type:'NBA',size:5,page:3}).then(res=>{ console.log(res) }) </script> </body> </html>
import axios from 'axios'; import qs from 'qs' // 1.创建实例 const myaxios = axios.create({ baseURL: '请求路由地址' }) // 请求拦截 myaxios.interceptors.request.use(function(config){ // 使用qs 来处理post的参数 config.data = qs.stringify(config.data) return config }) // 响应拦截 myaxios.interceptors.response.use(function(res){ return res.data }) export default myaxios
提示:文章总结:
以上就是今天要讲的内容,本文介绍了axios的两种拦截,希望开开心心快快乐乐,无忧无虑没有烦恼。
原文链接:https://blog.csdn.net/Mr_Ypp/article/details/126882899
作者:代码搬运工
链接:http://www.qianduanheidong.com/blog/article/459376/52d2d381306e3af18d35/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!