【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)
        })
目录
相关文章
|
6月前
axios拦截器
axios拦截器
33 0
|
1月前
|
缓存 JavaScript 搜索推荐
|
26天前
|
JavaScript
axios中的那些天才代码!看完我实力大涨!
【10月更文挑战第13天】axios中的那些天才代码!看完我实力大涨!
31 1
|
30天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
85 4
|
5月前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
5月前
|
前端开发 JavaScript API
技术经验分享:axios的全局配置baseUrl
技术经验分享:axios的全局配置baseUrl
269 3
|
5月前
|
前端开发 开发工具 git
大事件项目15----axios响应拦截器,统一判断401做被动退出
大事件项目15----axios响应拦截器,统一判断401做被动退出
|
4月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
237 0
|
5月前
|
JSON JavaScript API
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
|
6月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
172 1