Vue.js中URL编码异常排查：Axios GET请求失败

我来帮你搞定这个axios请求的编码问题！你遇到的问题大概率是因为encodeURI的编码范围有限，没法正确处理参数里的特殊字符（比如你例子里的macy's单引号，或者空格），导致请求URL格式出错。下面给你两种靠谱的解决办法，优先推荐第一种：

方法1：用axios的params配置自动编码（最推荐） #

不用手动编码整个URL，直接把参数放到axios的params配置里，axios会自动帮你对每个参数值做encodeURIComponent编码，完美处理空格、单引号这类特殊字符。

示例代码：

import axios from 'axios'

export default {
  name: 'GetCategoryItemsAndDisplayOne',
  data() {
    return {
      catalogselected: "macy's",
      data_to_show_on_mainpage: [],
      categoriesfordisplay: { men: /* 你的其他数据 */ }
    }
  },
  methods: {
    async fetchCatalogData() {
      try {
        // 把需要传递的参数放到params对象里
        const response = await axios.get('/你的接口地址', {
          params: {
            catalog: this.catalogselected,
            // 这里可以加其他参数，比如type: 'xxx'，axios都会自动编码
          }
        })
        this.data_to_show_on_mainpage = response.data
      } catch (error) {
        console.error('请求出错啦:', error)
      }
    }
  },
  mounted() {
    // 组件挂载后发起请求
    this.fetchCatalogData()
  }
}

方法2：手动用encodeURIComponent处理单个参数 #

如果一定要手动拼接URL，别用encodeURI编码整个URL，而是用encodeURIComponent单独处理每个参数值——它会编码所有非标准字符（包括单引号、空格），比encodeURI更适合处理参数。

示例代码：

async fetchCatalogData() {
  try {
    // 单独编码参数值
    const encodedCatalog = encodeURIComponent(this.catalogselected)
    // 拼接成合法的URL
    const requestUrl = `/你的接口地址?catalog=${encodedCatalog}`
    const response = await axios.get(requestUrl)
    this.data_to_show_on_mainpage = response.data
  } catch (error) {
    console.error('请求出错啦:', error)
  }
}

为什么encodeURI不行？ #

encodeURI的编码范围比较窄，它不会编码单引号、斜杠、冒号这些字符，而这些字符在URL参数里可能会导致服务器解析URL时出错。而encodeURIComponent会编码所有不符合URL标准的字符，是处理参数值的正确选择。

内容的提问来源于stack exchange，提问作者anirudh kumar