全局拦截器拦截get请求，并对get请求进行处理

水深无声 2024-03-16 20:56 8阅读 0赞

案例：控制台中请求url跟代码中的请求参数格式不一样，why ?

原因：全局拦截器对get请求做了处理

控制台：

![0d1f5887af4e4249b877ecf05e0eeb5f.png][]

代码请求：

async init () {
        const params = { //构造了个对象
            page: this.page,
            pageSize: this.pageSize,
            name: this.input ? this.input : undefined
         }//这里组装成了json，为什么变成了request url的形式，这是因为request.js里的request拦截器 拦截到了get请求，又重新组装了下
         await getMemberList(params).then(res => {
             if (String(res.code) === '1') {
                 this.tableData = res.data.records || []
                 this.counts = res.data.total
             }
         }).catch(err => {
              this.$message.error('请求出错了：' + err)
         })
    },

全局拦截器（request.js）：

// request拦截器
      service.interceptors.request.use(config => {
        // 是否需要设置 token
        // const isToken = (config.headers || {}).isToken === false
        // if (getToken() && !isToken) {
        //   config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
        // }
        // get请求映射params参数
        if (config.method === 'get' && config.params) {
          let url = config.url + '?';
          for (const propName of Object.keys(config.params)) {
            const value = config.params[propName];
            var part = encodeURIComponent(propName) + "=";
            if (value !== null && typeof(value) !== "undefined") {
              if (typeof value === 'object') {
                for (const key of Object.keys(value)) {
                  let params = propName + '[' + key + ']';
                  var subPart = encodeURIComponent(params) + "=";
                  url += subPart + encodeURIComponent(value[key]) + "&";
                }
              } else {
                url += part + encodeURIComponent(value) + "&";
              }
            }
          }
          url = url.slice(0, -1);
          config.params = {};
          config.url = url;
        }
        return config
      }, error => {
          console.log(error)
          Promise.reject(error)
      })

[0d1f5887af4e4249b877ecf05e0eeb5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/61d3853634cd42cf9e2c330ce9488348.png