Qual desses dois métodos deve ser usado para codificar URLs?

Depende do que você realmente deseja fazer.

encodeURI assume que a entrada é um URI completo que pode ter alguns caracteres que precisam ser codificados.

encodeURIComponent codificará tudo com significado especial; portanto, você o usará para componentes de URIs como

var world = "A string with symbols & characters that have special meaning?";
var uri = 'http://example.com/foo?hello=' + encodeURIComponent(world);

Se você estiver codificando uma string para inserir um componente de URL (um parâmetro de string de consulta), deve ligar encodeURIComponent.

Se você estiver codificando um URL existente, ligue encodeURI.

O xkr.us tem uma ótima discussão, com exemplos. Para citar seu resumo:

O método escape () não codifica o caractere + que é interpretado como um espaço no lado do servidor e gerado por formulários com espaços em seus campos. Devido a essa falha e ao fato de que essa função falha ao manipular caracteres não ASCII corretamente, você deve evitar o uso de escape () sempre que possível. A melhor alternativa é geralmente encodeURIComponent ().

escape () não codifica: @ * / +

O uso do método encodeURI () é um pouco mais especializado do que escape (), na medida em que codifica para URIs em oposição à querystring, que faz parte de uma URL. Use esse método quando precisar codificar uma sequência a ser usada para qualquer recurso que use URIs e precise que certos caracteres permaneçam não codificados. Observe que esse método não codifica o caractere ', pois é um caractere válido nos URIs.

encodeURI () não codifica: ~! @ # $ & * () =: /,;? + '

Por fim, o método encodeURIComponent () deve ser usado na maioria dos casos ao codificar um único componente de um URI. Esse método codifica certos caracteres que normalmente seriam reconhecidos como caracteres especiais para URIs, para que muitos componentes possam ser incluídos. Observe que esse método não codifica o caractere ', pois é um caractere válido nos URIs.

encodeURIComponent () não codifica: ~! * () '

Aqui está um resumo.

1. escape () não codifica @ * _ + -. /

   Não use isso.

2. encodeURI () não codificará AZ az 0-9; , /? : @ & = + $ - _. ! ~ * '() #

   Use-o quando sua entrada for um URL completo como ' https://searchexample.com/search?q=wiki '

3. encodeURIComponent () não codifica AZ az 0-9 - _. ! ~ * '() Use-o quando sua entrada fizer parte de um URL completo, por exemplo const queryStr = encodeURIComponent(someString)

encodeURIComponent (): assume que seu argumento é uma parte (como o protocolo, nome do host, caminho ou cadeia de caracteres da consulta) de um URI. Portanto, ele escapa os caracteres de pontuação usados ​​para separar as partes de um URI.

encodeURI (): é usado para codificar o URL existente

Diferença entre encodeURIe encodeURIComponent:

encodeURIComponent(value)é usado principalmente para codificar valores de parâmetro queryString e codifica todos os caracteres aplicáveis ​​em value. encodeURIignora o prefixo do protocolo ( http://) e o nome do domínio.

Em casos muito, muito raros, quando você deseja implementar a codificação manual para codificar caracteres adicionais (embora eles não precisem ser codificados em casos típicos) como:, ! *então você pode usar:

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

( fonte )

Outras respostas descrevem os propósitos. Aqui estão os caracteres que cada função realmente converterá :

control = '\x00\x01\x02\x03\x04\x05\x06\x07\x08\x09\x0A\x0B\x0C\x0D\x0E\x0F'
        + '\x10\x11\x12\x13\x14\X15\x16\x17\x18\x19\x1A\x1B\x1C\x1D\x1E\x1F'
                                                                    + '\x7F'
encodeURI         (control + ' "%<>[\\]^`{|}'                             )
encodeURIComponent(control + ' "%<>[\\]^`{|}' + '#$&,:;=?' + '+/@'        )
escape            (control + ' "%<>[\\]^`{|}' + '#$&,:;=?' +       "!'()~")

Todos os caracteres acima são convertidos em códigos percentuais hexadecimais. Espaço para %20, porcentagem para %25etc. Os caracteres abaixo passam inalterados.

Aqui estão os caracteres que as funções NÃO converterão :

pass_thru = '*-._0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

encodeURI         (pass_thru + '#$&,:;=?' + '+/@' + "!'()~")
encodeURIComponent(pass_thru +                      "!'()~")
escape            (pass_thru +              '+/@'          )

Como regra geral, use encodeURIComponent. Não tenha medo do nome longo, pensando que é mais específico em seu uso, para mim é o método mais comumente usado. Além disso, não se preocupe em usar o encodeURI porque você o testou e parece estar codificando corretamente, provavelmente não é o que você queria usar e, embora seu teste simples usando "Fred" em um campo de nome tenha funcionado, você encontrará mais tarde, quando você usar texto mais avançado, como adicionar um e comercial ou hashtag, ele falhará. Você pode olhar para as outras respostas pelos motivos pelos quais isso acontece.