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

1. Axios uso básico

instalar

Sob pasta atualnpm install axios --save
Aqui Insert Picture Descrição

importação de arquivos e uso

rede de documentos de entrada solicitado

import axios from 'axios'

Ele pode ser usado directamente axios (config), objeto de configuração geral

axios({
  url:'xxx' 
}).then(res =>{
  console.log(res); //axios支持promise的API
})

Padrões para obter pedido, o pedido pode ser configurado para pós

axios({
  url:'xxx',
  method: "post"
}).then(res =>{
  console.log(res); 
})

Há outras maneiras Pedido

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Pedido de Parâmetros params

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  //请求参数
  params: {
    type: 'pop',
    page: 1
  }
}).then(res =>{
  console.log(res); 
})

parâmetro de solicitação seguindo o formulário de solicitação de endereço url emendados desejado

2. Axios solicitações simultâneas

Às vezes, a necessidade de enviar várias solicitações usandoaxios.all([])

//axios.all([axios({}),axios({})])
axios.all([axios({
  url: 'xxx'
}).axios({
  url: 'zzz'
})])
.then(res =>{
  console.log(res); 
})

Res retorna uma matriz de objectos, em seguida, o método pode ser utilizado na axios.spreadmatriz dividido

axios.all([axios({
  url: 'xxx'
}).axios({
  url: 'zzz'
})])
.then(axios.spread(res1,res2) =>{
  console.log(res1); 
  console.log(res2); 
})

3. Axios configuração global

Alguns parâmetros são o desenvolvimento real usado em alguns pedidos, estes parâmetros comuns pode ser configurado na entrada do arquivo para que o arquivo pode ser usado no pedido, usando os padrões Propriedades Axios

axios.defaults.baseURL = 'xxx'
axios.defaults.timeout = 5000

Exemplo 4. axios

Quando importar o módulo de objecto a partir de axios, exemplos utilizando o exemplo padrão, quando o exemplo para definir uma configuração predefinida, que é fixo para baixo
No entanto, o desenvolvimento posterior, determinada configuração pode não ser o mesmo, como alguns pedidos requerem tempo limite baseURL específico ou similar, pode criar uma nova instância, e passe pertence à configuração deste exemplo

//创建axios实例instance1，可以增加需要的配置
const instance1 = axios.create({
  baseURL: 'xxx',
  timeout: 5000
})

//实例instance1发送网络请求
instance1({
  url: 'yyy',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
  
})

pacote de pedidos de rede 5. Axios

Se uma pluralidade de componentes são necessários solicitação de rede, Axios pedido de importação em cada arquivo de componente não é realista.
Você pode criar um arquivo separado para Axios solicitações de rede, este arquivo uma função solicitação por escrito de solicitações de rede, componentes necessários dos pedidos de rede pode importar função

método um

Aqui Insert Picture Descrição
Outros documentos necessários quando uma solicitação de rede, para importar esta função e, em seguida, chamar essa função

//在其他文件中,调用request函数
import request from './network/request'
//其中第一个参数对象=config参数，第二个参数函数=success参数，第三个参数函数=failure函数
request({
  url: 'xxx'
},res => {
  console.log(res); 
},err => {
  console.log(err); 
})

Método dois: Add promessa

Aqui Insert Picture Descrição

//在其他文件中,调用request函数
import request from './network/request'

request({url: 'xxx'}) //这个request函数调用后返回一个promise对象,创建后立即执行promise的异步操作（创建axios实例与网络请求）
.then(res => {console.log(res); })//网络请求成功调用axios实例的then方法，then方法又调用外层promise的resolve方法，从而触发promise的then方法
.catch(err => {console.log(err); })

Método três: o método final

Método dois são na verdade dois conjuntos de promessa juntos (proibição de bonecas), Axios o objeto em si é uma promessa, não retornam promessa, exemplos Axios retorno direto

import axios from 'axios'

export function request(config){
    //1.创建axios实例，不要用全局
    const instance = axios.create({
      baseURL = "xxx",
      //baseURL = "xxx" 
      timeout: 5000
    })
    return instance(config)
}

//在其他文件中,调用request函数
import request from './network/request'

request({url: 'xxx'}) //这个request函数调用后返回一个axios实例，他就能用promise的api
.then(res => {console.log(res); })
.catch(err => {console.log(err); })

interceptores Axios

arquivo escrito Axios gerais do pacote

Request (sucesso / fracasso)instance.interceptors.request;
Response (sucesso / fracasso)instance.interceptors.response;

//请求拦截器
instance.interceptors.request.use(config => {
  console.log(config);
  return config; //要返回拦截的请求内容不然后续网络请求就失败了
},err => {
  console.log(err);    
});
//响应拦截器
instance.interceptors.response.use(result => {
  console.log(result); 
  return result.data //一般result中的data有用 
},err => {
  console.log(err);  
});