vue如何灵活设置不同页面不同的limit参数

Question

利用vue-cli + ElementUI 随手写个东西

然后根据网上的说法,简单封装了下axios,设置了一个拦截器,一个request,一个response

如果我所以接口都是

limit = 50

我可以在request 里 设置

config.params['limit'] = 50;

但是我有些页面不能都是50,这样可能数据就太多了...

所以我想 设置部分的是20,一部分可能是10,大部分还是50,

然而我并不想每个页面请求的时候都带一个 limit=10 这种写法,

那么,请问各位大神,我该怎么写?

下面是我封装axios的代码

import axios from 'axios';
import { Message } from 'element-ui';
import cookie from '../utils/cookie.js';


const service = axios.create({
  baseURL: process.env.BASE_API, 
  timeout: 5000,                  
  params:{}
});


service.interceptors.request.use(config => {
// console.log('请求前');
  if (config.method === 'get') {
    config.params['limit'] = 50;
  }


  if (cookie.getCookie('token') ) {
    config.headers['x-auth-token'] = cookie.getCookie('token'); 
  }

  return config;
}, error => {
  console.log(error); 
  Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(function (response) {
    // console.log('请求后',this.$route.params);

    // console.log(response.data);
    const code = response.data.code;
    const message = response.data.message;
    if (code === 411000000) {
      location.href = '/login'
    }
    if (code !== 0 && code !== 200 ) {
        Message({
          message: message,
          type: 'error',
          duration: 5 * 1000
        });
    }
    return response;
},
 
  error => {
    console.log('err' + error);
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;

Answer 1

建议我这样封装
import Qs from 'qs';
export default{
url: '/route',
baseURL: 'http://0.0.0.0:8080',
method: 'POST',
transformRequest: [function(data) {

// 为了避免qs格式化时对内层对象的格式化先把内层的对象转为
// data.CustData = JSON.stringify(data.CustData);
// 由于使用的form-data传数据所以要格式化
data = Qs.stringify(data);
return data;

}],
transformResponse: [function(data) {

return data;

}],
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
params: {

limit: 10,
openid: '57c80528e4b07e300ed4ffbb',
pubacckey: '',
timestamp: '',
nonce: '',
pubaccid: ''

},
paramsSerializer: function(params) {

return Qs.stringify(params);

},
data: {},
timeout: 1000,
withCredentials: false, // default
responseType: 'json', // default
maxContentLength: 2000,
validateStatus: function(status) {

return status >= 200 && status < 300; // default

},
maxRedirects: 5 // default
};

Answer 2

在transformRequest里封装一下，判断一下params里有没有limit这个参数，有就用传过来的，没有就用默认的

Answer 3

if(!config.params['limit']){

config.params['limit'] = 50;

}