Introdução aos axios

Quando o projeto precisa usar solicitações de rede, há muitas maneiras de escolher ajax nativo (com base em XMLHttpRequest), jQuery-Ajax, vue-resource (obsoleto) e, a seguir, até os axios atuais.

As vantagens dos axios são:

1. Envie uma solicitação XMLHttpRequest no navegador.

2. Envie a solicitação http em node.js.

3. Promessa de suporte.

4. Pode interceptar solicitações e respostas.

5. Solicitação e resposta de conversão.

Método de solicitação Axios:

1. axios (config)

2. axios.request (config)

3. axios.get (url, config)

4. axios.delete (url, config)

5. axios.head (url, config)

6. axios.post (url, dados, configuração)

7. axios.put (url, dados, configuração)

8. axios.patch (url, dados, configuração)

Axios envia solicitações simultâneas, você pode usar .all () para mesclar solicitações simultâneas

 axios.all([ axios( 第一次网络请求 )

            ,axios( 第二次网络请求 )]

          )
     
     .then(results=>{
     
     //结果处理语句 
     
     })

Os resultados retornados são uma matriz, que é uma matriz combinada dos resultados das n solicitações anteriores.

Você pode usar .spread () para dividir os resultados:

 axios.all([axios( //第一次网络请求 ),axios( //第二次网络请求 )])
     
     .then(axios.spread( (res1,res2) => {
     
        console.log(res1);
     
        console.log(res2)
     
       })

     )

Configuração global de axios:

 axios.defaults.baseURL = "http://127.1.1.1"
 ​
 axios.defaults.timeout = 1000

Opções de configuração comuns:

1. Endereço de solicitação: url: '/ usuário'

2. Tipo de solicitação: método: 'get'

3. Solicitar caminho raiz: baseURL: ' http://127.1.1.1 '

4. Processamento de dados antes da solicitação: transformRequest: [function (data) {}]

5. Processamento de dados após solicitação: transformResponse: [função (dados) {}]

6. Cabeçalho de solicitação personalizada: cabeçalhos: {'X-Requested-With': 'XMLHttpRequest'}

7. objeto de consulta de url: params: {id: 12}

8. Função de serialização do objeto de consulta: paramsSerializer: function (params) {}

9. corpo da solicitação ： dados: {chave: 'xx'}

10. Configuração de tempo limite ms: tempo limite: 1000

11. Se deve trazer tokens entre domínios: withCredentials: false

12. Solicitação de processamento personalizado: adaptador: função (resolver, rejeitar, config) {}

13. Informações de verificação de identidade: auth: {uname: 'xiaoming', pwd: '12 '}

14. Formato de dados de resposta: json / blob / document / arraybuffer / text / steam responseType: 'json'

instância axios

Crie várias instâncias para axios. Na instância, você pode criar algumas informações de configuração padrão para esta instância. Quando uma determinada instância é usada, a configuração dessa instância será acionada.

Crie uma instância:

const instance = axios.create({ baseURL:'http://127.1.1.1', timeout:1000 })

Caso de uso:

 instance({ url:'/user' })

Pacote Axios formulário um:

 import axios from 'axios'
 ​
 export function request( config, success, fail ){
 ​
     const instance = axios.create({ baseURL:'http://127.1.1.1', timeout: 1000 })
     
     instance(config)
     
     .then( res=>{
     
         success(res)
         
     })
     
     .catch( err=>{
     
         fail(err)
         
     })
     
 }

No componente:

import { request } from './request.js'
 ​
 request( { url:'/user' }, 
         res => { console.log(res) }, 
         err=>{console.log(err) } 
        )

Pacote Axios de dois:

export function request(config){
    return new Promise(resolve, reject)=>{
        const instance = axios.create({
            baseURL: 'http://127.1.1.1',
            timeout: 1000
        })
        instance(config).then(res=>{ resolve(res) })
                        .catch(err=>{ reject(err) })   
    })
}

No componente:

request({ url:'/home' }).then(res=>{ console.log(res) })
                        .catch(err=>{ console.log(err) })

Pacote Axios de três formas:

Como a própria instância axios é uma axiosPromise, você pode retornar diretamente essa instância sem usar outra Promise para encapsulá-la.

export function request(config){
    const instance = axios.create({
        baseURL: 'http://127.1.1.1',
        timeout: 1000
    })

    return instance(config)
}

No componente:

request({ url:'/home' }).then(res=>{ console.log(res) })
                        .catch(err=>{ console.log(err) })