0
点赞
收藏
分享

微信扫一扫

vue里使用axios的时候返回数据少了status的问题

Mhhao 2022-08-18 阅读 55


问题

封装的 axios 里,业务组件请求 api 时,发现返回的数据没有 status 状态码

vue里使用axios的时候返回数据少了status的问题_axios

但是按理应该返回下面这种数据格式才对

vue里使用axios的时候返回数据少了status的问题_数据_02

解决

问题出现的原因就是发现项目里面有两个不同文件都封装全局的 axios, 然后他们在响应拦截器都做了下面的处理,return 了 response.data,第一个拦截器执行完第二个拦截器再执行,传的值就会进行 data.data 的处理。

import axios from 'axios';

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.data) {
return response.data;
} else {
return Promise.reject(response);
}
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});

方法一:分别创建实例,然后实例拦截

方法二:合并为一个 axios 文件

我们以方法一为例:

import axios from 'axios';
// 创建实例
let axiosTest = axios.create({});
// 添加响应拦截器
axiosTest.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.data) {
return response.data;
} else {
return Promise.reject(response);
}
}, error => {
// 对响应错误做点什么
return Promise.reject(error);
});

上面的 axios.create 其实返回的是一个 function,就是 Axios 实例的 Axios.prototype.request

可以看一下 axios 源码里的这两个文件

Axios.js

'use strict';

var utils = require('./../utils');
var buildURL = require('../helpers/buildURL');
var InterceptorManager = require('./InterceptorManager');
var dispatchRequest = require('./dispatchRequest');
var mergeConfig = require('./mergeConfig');

/**
* Create a new instance of Axios
*
* @param {Object} instanceConfig The default config for the instance
*/
function Axios(instanceConfig) {
this.defaults = instanceConfig;
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
};
}

/**
* Dispatch a request
*
* @param {Object} config The config specific for this request (merged with this.defaults)
*/
Axios.prototype.request = function request(config) {
/*eslint no-param-reassign:0*/
// Allow for axios('example/url'[, config]) a la fetch API
if (typeof config === 'string') {
config = arguments[1] || {};
config.url = arguments[0];
} else {
config = config || {};
}

config = mergeConfig(this.defaults, config);

// Set config.method
if (config.method) {
config.method = config.method.toLowerCase();
} else if (this.defaults.method) {
config.method = this.defaults.method.toLowerCase();
} else {
config.method = 'get';
}

// Hook up interceptors middleware
var chain = [dispatchRequest, undefined];
var promise = Promise.resolve(config);

this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
chain.unshift(interceptor.fulfilled, interceptor.rejected);
});

this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
chain.push(interceptor.fulfilled, interceptor.rejected);
});

while (chain.length) {
promise = promise.then(chain.shift(), chain.shift());
}

return promise;
};

Axios.prototype.getUri = function getUri(config) {
config = mergeConfig(this.defaults, config);
return buildURL(config.url, config.params, config.paramsSerializer).replace(/^\?/, '');
};

// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, config) {
return this.request(utils.merge(config || {}, {
method: method,
url: url
}));
};
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
/*eslint func-names:0*/
Axios.prototype[method] = function(url, data, config) {
return this.request(utils.merge(config || {}, {
method: method,
url: url,
data: data
}));
};
});

module.exports = Axios;

InterceptorManager.js

axios 对拦截器的实现是通过 ​​./lib/core/InterceptorManager​​ 模块来管理的

'use strict';

var utils = require('./../utils');

function InterceptorManager() {
this.handlers = [];
}

/**
* Add a new interceptor to the stack
*
* @param {Function} fulfilled The function to handle `then` for a `Promise`
* @param {Function} rejected The function to handle `reject` for a `Promise`
*
* @return {Number} An ID used to remove interceptor later
*/
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
this.handlers.push({
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1;
};

/**
* Remove an interceptor from the stack
*
* @param {Number} id The ID that was returned by `use`
*/
InterceptorManager.prototype.eject = function eject(id) {
if (this.handlers[id]) {
this.handlers[id] = null;
}
};

/**
* Iterate over all the registered interceptors
*
* This method is particularly useful for skipping over any
* interceptors that may have become `null` calling `eject`.
*
* @param {Function} fn The function to call for each interceptor
*/
InterceptorManager.prototype.forEach = function forEach(fn) {
utils.forEach(this.handlers, function forEachHandler(h) {
if (h !== null) {
fn(h);
}
});
};

module.exports = InterceptorManager;


举报

相关推荐

0 条评论