Vue utilizado Axios (XI)

Axios é baseada na promessa de uma biblioteca HTTP, você pode usar o navegador e node.js no.

1, os axios de instalação:

CNPM instalar Axios --save

2, os axios introdução:

Axios de "Axios" importação 
Vue.prototype. $ Axios = Axios

3, usando o exemplo:

<Template>
  <Div id = "app">
     
  </ Div>
</ Template>
<Script> 
Import Aprenda com "./components/Learn"
 // qs introduzidas, a biblioteca está contido dentro Axios 
importar Qs de 'qs'

exportação padrão {
  citar: "App" ,
  componentes: {
    Saiba    // injeção 
  },
  dados () {
    retorno {
      
    }
  },
  montado () {
    // obter请求
    isso . $ Axios.get ( "/ api / estudante / obter / 1" )
    .Depois (res => {
      console.log (res.data)
    })
    . captura (erro => {
      console.log (erro)
    })

    // obter请求
    isso . $ Axios.get ( "/ api / estudante / getStudent" , {
      params: {
        id: 1
      }
    })
    .Depois (res => {
      console.log (res.data);
    })
    . captura (erro => {
      console.log (erro);
    });

    // solicitação POST, o padrão do tipo de conteúdo de arquivo application / JSON 
    a este . $ Axios.post ( "/ API / estudante / addStudent" , {
      stuId: 20 ,
      stuName: "Python"
    })
    .Depois (res => {
        console.log (res.data)
    })
    . captura (erro => {
        console.log (erro)
    })

    // Content-type solicitação post conversão, módulo QS irá solicitar parâmetros de arquivo application / x-www-form-urlencoded 
    a este . $ Axios.post ( "/ API / estudante / addStudent" , Qs.stringify ({
      stuId: 21 ,
      stuName: 'Linux'
    }))
    .Depois (res => {
      console.log (res.data)
    })
    . captura (erro => {
      console.log (erro)
    })

  }
  
};
</ Script>

4, vários domínios exemplo de configuração (config modificado / index.js):

// cross-domain configuração 
proxyTable: {
   '/ API' : {
    target: 'http: // localhost: 8087',   // interface domínio 
    changeOrigin: a true ,   // se um cross-domain 
    pathRewrite: {
       '^ / API': ''    // necessidade de reescrever a reescrever 
    }
  }

}

configuração de cross-domain geralmente formal, ambiental, definida pelo servidor.

5, a implementação de várias solicitações simultâneas:

função getUserAccount () {
   return axios.get ( '/ utilizador / 12345' );
}

função getUserPermissions () {
   return axios.get ( '/ user / 12345 / permissões' );
}

axios.all ([getUserAccount (), getUserPermissions ()])
  .then (axios.spread ( função (acct, PERMS) {
     // dois pedidos estão agora concluída a execução 
  }));

6, em resposta à estrutura:

{
   // `data` resposta fornecida pelo servidor 
  de dados: {},

  // `status` o código de status HTTP a partir do servidor em resposta ao 
  Status: 200 é ,

  // as informações de estado HTTP a partir do servidor em resposta à `statusText` 
  o statusText: 'OK' ,

  // `headers` cabeçalho de resposta do servidor 
  cabeçalhos: {},

  // `informações de configuração config` para solicitar o 
  config: {}
}

Usado thenquando a resposta recebida assim:

axios.get ( '/ utilizador / 12345' )
  .then ( função (resposta) {
    console.log (response.data);
    console.log (Response.Status);
    console.log (response.statusText);
    CONSOLE.LOG (response.headers);
    console.log (response.config);
  });

7, o padrão Axios mundial:

// main.js 
axios.defaults.baseURL = 'https://api.example.com' ;
axios.defaults.headers.common [ 'Autorização'] = auth_token;
axios.defaults.headers.post [ 'Content-Type'] = 'aplicação / x-www-forma-urlencoded';

ou:

 // main.js:
 Vue.prototype.HOST = "/ api"
 // visita: 
 var url = a esta .host + "/ studnet / GET / 1"

8, interceptor - é um pedido ou resposta thenou catchinterceptar o seu pré-tratamento:

// pedido add interceptor 
axios.interceptors.request.use ( função (config) {
     // fazer alguma coisa antes de enviar uma solicitação 
    de retorno de configuração;
  }, Function (erro) {
     // pedido para fazer algo errado 
    retorno Promise.reject (erro);
  });

// bloqueador resposta disso 
axios.interceptors.response.use ( função (Response) {
     // dados de resposta fazer algo 
    retorno de resposta;
  }, Function (erro) {
     // algo em resposta ao erro 
    de retorno Promise.reject (erro);
  });

9, manipulação de erros:

axios.get ( '/ utilizador / 12345' )
  . O problema ( função (erro) {
     IF (error.response) {
       // pedido foi emitido, mas o código de status de resposta do servidor não está dentro do escopo da 2xx 
      o console.log (error.response.data);
      console.log (error.response.status);
      CONSOLE.LOG (error.response.headers);
    } Else {
       // Alguma coisa aconteceu na criação da solicitação que desencadeou um erro 
      console.log ( 'erro' , Error.message);
    }
    console.log (error.config);
  });

 

 

 

referência:

"Vue.js real"

https://www.kancloud.cn/yunye/axios/234845

https://cn.vuejs.org/v2/guide/