wepy plugin axios
1.0.0
Em primeiro lugar, obrigado aos autores de axios e wepy por fornecerem bibliotecas tão excelentes!
Este é um plug-in wepy que permite usar axios em pequenos programas
documentação do axios | documentação do wepy
Ao criar um miniprograma, as funções da função wx.request incorporada ao miniprograma foram severamente limitadas. Mesmo wepy.request é apenas um simples encapsulamento da função original e não pode fornecer funções avançadas como axios. in permite que a maioria das funções do axios sejam usadas em programas pequenos.
Mantendo a API o mais próximo possível da API original do axios, este plug-in encapsula wx.request , wx.uploadFile e wx.downloadFile . Ao mesmo tempo, fornece uma função de fila de solicitações, aumentando o limite de envio. até 5 solicitações ao mesmo tempo.
Se você gostou, dê uma estrela e apoie. Questões e PRs são bem-vindos?
Use npm ou yarn para instalar axios e wepy-plugin-axios ao mesmo tempo
npm instalar axios wepy-plugin-axios --save fio adicionar axios wepy-plugin-axios
Nota: Este plug-in deve ser usado com wepy . Os exemplos a seguir usam a versão mais recente do wepy. Se você não sabe como usar o wepy ou o axios, leia primeiro a respectiva documentação.
Configurar o Wepy
Adicione o item axios plugins de wepy.config.js . O plugin não possui opções, basta usar um objeto vazio como opção.
módulo.exportações = {
// ...outros plug-ins de configuração: {// ...outros eixos de plug-ins: {}
}}Nota: Se você estiver usando a configuração padrão gerada pelo wepy, existe o seguinte código no final do arquivo:
módulo.exportações.plugin = {
uglifyjs: {// ...
},
imagemmin: {// ...
}} Aqui você também precisa inserir uma linha de axios: {} , caso contrário ocorrerá um erro ao gerar a versão de lançamento.
Configurar eixos
Introduza uma função para gerar adaptador de wepy-plugin-axios/dist/adapter e, em seguida, passe uma instância de axios para esta função para obter um adaptador
Use axios.defaults ou axios.create para definir adapter de axios (o último é recomendado)
import axios from 'axios'import wepyAxiosAdapter from 'wepy-plugin-axios/dist/adapter'// A inicialização do adaptador deve ser executada antes de qualquer outro axios.create const adaptador = wepyAxiosAdapter(axios)export default axios.create({
adaptador: adaptador // Esta propriedade é a chave para usar axios em um miniprograma // ...Outras propriedades})O exemplo a seguir pressupõe que a configuração foi concluída de acordo com o conteúdo acima.
//Enviar uma solicitação GET normal axios.get('https://huajingkun.com/api/userinfo')//Enviar dados json axios.request({
método: 'post',
url: 'https://huajingkun.com/api/userinfo',
dados: {apelido: '233'
}})//Enviar dados codificados em URL axios.post('https://huajingkun.com/api/userinfo', { apelido: '233' }, {
cabeçalhos: {'content-type': 'application/x-www-form-urlencoded'
}}) Se o campo $upload aparecer nos dados da solicitação POST, esta solicitação será considerada como uma solicitação de upload de arquivo.
axios.post('https://huajingkun.com/api/avatar', {
$upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // Resultados de interfaces como wx.chooseImage },
// ...Outros dados enviados juntos}) Se responseType for file em uma solicitação GET, essa solicitação será considerada uma solicitação de download de arquivo. O caminho temporário do arquivo será retornado (consulte a documentação de desenvolvimento do miniprograma para obter detalhes).
Nota: o protocolo http só pode ser usado neste momento
axios.get('http://www.baidu.com', { responseType: 'file' }).then(response => {
console.log(response.data) // Gera o caminho temporário do arquivo baixado com sucesso})Este plug-in fornece suporte para a maioria das opções do axios e também faz algumas modificações com base na API original do axios:
Nota: Devido às funções de solicitação limitadas do miniprograma, as seguintes opções não são suportadas. Se as seguintes opções aparecerem durante o uso, elas serão ignoradas.
timeout
withCredentials
auth
xsrfCookieName
xsrfHeaderName
onUploadProgress
onDownloadProgress
maxContentLength
maxRedirects
httpAgent
httpsAgent
proxy
url : O protocolo deve ser especificado e só pode ser http ou https. Somente o download de arquivos pode usar http.
method : só pode ser um método suportado pelo miniprograma (consulte a documentação de desenvolvimento do miniprograma para obter detalhes)
responseType : só pode ser json , text e file
O conteúdo retornado é semelhante ao conteúdo retornado de axios:
{
//Dados de resposta enviados de volta pelo servidor //Para solicitações de download de arquivo, o conteúdo do campo de dados é o caminho temporário dos dados do arquivo: objeto string qualquer |
// Status do código de resposta HTTP: número,
// Cabeçalhos HTTP retornados pelo servidor. Todos os nomes de cabeçalho estão em letras minúsculas // Para solicitações de upload ou download, o campo de cabeçalhos é sempre um objeto vazio (o miniaplicativo não fornece o conteúdo do cabeçalho retornado)
cabeçalhos: objeto,
// Opções de solicitação usadas pelo axios config: object,
// Passa o conteúdo específico da solicitação wx.request ou wx.uploadFile ou wx.downloadFile: object}Como o atual sistema de plug-ins do wepy não é perfeito o suficiente, este plug-in usa um método relativamente "sujo" para permitir o uso de axios no wepy:
Modifique diretamente o arquivo de origem do axios
A definição de adaptadores no arquivo de origem do axios lib/defaults.js foi excluída em lib/plugin.js . Como o axios suporta navegadores e Node.js, o wepy não pode ignorar o módulo nativo do Node.js ao empacotar. fazer com que a embalagem falhe.
No entanto, o plug-in wepy atualmente só pode modificar o arquivo de origem na última etapa do empacotamento e não pode modificar as informações de dependência. Portanto, o código preparado para Node.js não pode ser ignorado, portanto, só pode ser excluído rudemente. A propósito, também excluí o código quebrado pelo navegador, porque XMLHttpRequest não pode ser usado em miniprogramas e um adaptador personalizado deve ser usado completamente. Após a exclusão, o tamanho do arquivo também pode ser reduzido.
Esta modificação significa que se o código do seu applet compartilhar uma pasta node_modules com outro código, outro código não poderá usar axios normalmente.
Como o wepy atualmente não possui uma função de alias, você só pode copiar toda a pasta do projeto para a pasta node_modules do projeto de teste durante o desenvolvimento e alterar wepy-plugin-axios/dist/adapter para wepy-plugin-axios/lib/adapter.js
Execute o seguinte comando durante a compilação para obter o arquivo final na pasta dist :
npm executar compilação
MIT
