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

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

问题

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


20200916210930160.png

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

20200916210946235.png


解决

问题出现的原因就是发现项目里面有两个不同文件都封装全局的 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;




目录
相关文章
|
11天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`<li v-for="activity in activities">`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
61 5
|
12天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
11 1
|
13天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定
|
18天前
|
JavaScript
|
20天前
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
14 0
|
20天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
13 0
|
27天前
|
JavaScript Java 测试技术
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于小程序的个人健康数据管理系统+springboot+vue.js附带文章和源代码设计说明文档ppt
30 0
|
1月前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
1月前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
1月前
|
JavaScript 前端开发 开发者
Vue.js过滤器:让数据展示更灵活
Vue.js过滤器:让数据展示更灵活