【Axios】配置默认值及拦截器代码逐行详解

简介: 【Axios】配置默认值及拦截器代码逐行详解


一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者,可拜上将军也。


Axios-配置默认值及拦截器

在使用Axios之前,我们一般都需要配置默认的配置项

// 1. 基础URL,后期再发送请求的时候,URL请求地址最前面的公共部分就不需要再写了
        axios.defaults.baseURL = "http://127.0.0.1:8080/";
        // 2. 跨域请求中允许携带资源凭证(例如COOKIE信息)
        axios.defaults.withCredentials = true
        // 3. 设置请求头:POST系列中,我们传递给服务器数据的格式一般以x-www-form-urlencoded格式为主
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-url'
        // 4. 设置请求拦截器(只对POST系列有用):把基于请求主体传递给服务器的内容进行拦截,
        // 把内容格式变为x-www-form-urlencoded这种格式,再传递给服务器
        axios.defaults.transformRequest = function (data) {
            if (!data) return data;
            let str = ``;
            for (let key in data) {
                if (!data.hasOwnProperty(key)) break;
                str += `${key}=${data[key]}&`
            }
            return str.substring(0, str.length - 1)
        }
        // 5. 设置响应拦截器:【成功状态】把从服务器获取的结果中的响应主体获取到即可,
        // 【失败状态】手动将错误信息抛出异常
        axios.interceptors.response.use(function (response) {
            return response.data
        }, function (error) {
            // 返回一个状态为错误的 Promise 实例
            return Promise.reject(error)
        })
        // 6. 配置什么才算成功(把PROMISE状态改为FULFILLED)
        axios.defaults.validateStatus = function (status) {
            return status >= 200 && status < 400
        }
        axios.get('./json/data.json').then(data => {
            console.log(data);
        }).catch(reason => {
            sonsole.log(reason)
        })
目录
相关文章
|
8月前
axios拦截器
axios拦截器
41 0
|
1天前
|
JSON 资源调度 前端开发
axios中的那些代码!
Axios为HTTP请求提供了一个强大的工具集,使得前端开发中与服务器通信变得更加简单和高效。通过掌握Axios的基础用法、拦截器、取消请求以及处理并发请求等高级功能,开发者可以大大提升开发效率和代码质量。希望本文能够帮助你更好地理解和使用Axios。
24 14
|
3月前
|
缓存 JavaScript 搜索推荐
|
3月前
|
JavaScript
axios中的那些天才代码!看完我实力大涨!
【10月更文挑战第13天】axios中的那些天才代码!看完我实力大涨!
44 1
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
241 4
|
7月前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
7月前
|
前端开发 JavaScript API
技术经验分享:axios的全局配置baseUrl
技术经验分享:axios的全局配置baseUrl
328 3
|
7月前
|
前端开发 开发工具 git
大事件项目15----axios响应拦截器,统一判断401做被动退出
大事件项目15----axios响应拦截器,统一判断401做被动退出
|
6月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
370 0
|
7月前
|
JSON JavaScript API
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置

热门文章

最新文章

  • 1
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    545
  • 2
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    239
  • 3
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    52
  • 4
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    52
  • 5
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    126
  • 6
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    157
  • 7
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    61
  • 8
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    38
  • 9
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    56
  • 10
    前后端数据交互之axios的路径怎样找?axios的路径是那个,是你打开Tomcat之后,出现的路径+你项目写的接口路径
    53