Artigo Diretório
I. Introdução
Existem muitas maneiras de enviar solicitações de rede no Vue, então, em desenvolvimento, como escolher?
1. Muitas vezes usamos jQuery-Ajax (em comparação com Ajax tradicional muito fácil de usar), por que não escolhê-lo?
- Em primeiro lugar, vamos deixar claro: jQuery raramente é usado em todo o desenvolvimento do Vue
- Portanto, para nos facilitar a fazer uma solicitação de rede, não é razoável citar um jQuery especificamente
- O código do jQuery tem 1w + linhas, o código do Vue tem apenas 1w + linhas
- Portanto, não há necessidade de citar esta estrutura pesada para usar solicitações de rede
2. Quando o Vue 1.x foi lançado oficialmente, o Vue-resource foi lançado. O volume do Vue-resource é muito menor que o do jQuery. Além disso, o Vue-resource foi lançado oficialmente. Por que não escolher?
- Após o lançamento do Vue2.0, o autor do Vue explicou a remoção do recurso vue em Problemas no GitHub, e ele não será atualizado no futuro.
- Então, isso significa que quando o vue-reource não suporta mais a nova versão, ele não continuará a atualizar e manter
- Existem grandes perigos ocultos para o desenvolvimento e manutenção de projetos futuros
3. Use axios
Embora afirme que o vue-resource não será mais atualizado e mantido, o autor do vue recomenda uma estrutura: axios
Dois, introdução aos axios
axios é um cliente HTTP baseado em Promise para navegadores e nodejs. É essencialmente um encapsulamento de XHR nativo, exceto que é uma versão de implementação de Promise e está em conformidade com as especificações ES mais recentes. axios tem um design simples, API simples, suporta navegadores e nó
Características:
- Envie solicitações XMLHttpRequests no navegador
- Suporte para envio de solicitações http em node.js
- API de promessa de suporte
- Interceptar solicitação e resposta
- Converter dados JSON automaticamente
- Converta dados de solicitação e resposta, etc.
Suporte a vários métodos de solicitação:
- axios (config)
- axios.request (config)
- axios.get (url [, config])
- axios.delete (url [, config])
- axios.head (url [, config])
- axios.post (url [, dados [, config]])
- axios.put (url [, dados [, config]])
- axios.patch (url [, dados [, config]])
Três, instalação
Para usar em vue, criei um projeto com vue-cli para demonstrar. Há um link para download do código de demonstração na parte inferior deste blog para aprendizado e comunicação.
npm install axios --save
Quatro, uso básico
1. Envie uma solicitação de obtenção
(1) Use axios(config), ele envia a solicitação get por padrão
axios({
url: '127.0.0.1:8000',
//拼接参数
params: {
name: 'webchang',
page: 1
},
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Nota: Como axios é baseado em Promise , a execução axios({ url: 'xxx' })retornará uma Promise, se obtiver os dados com sucesso, as chamadas são resolvidas internamente, para que possamos adicionar o método then () por trás disso.
(2) Use axios.get(url[, config])sem parâmetros
axios.get('http://127.0.0.1:8000')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
(3) Use axios.get(url[, config])com parâmetros
axios.get('http://127.0.0.1:8000', {
params: {
name: 'webchang',
page: 1
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Para obter solicitações, também podemos unir os parâmetros diretamente na parte de trás do url
axios.get('http://127.0.0.1:8000?name=webchang')
A resposta à solicitação axios contém as seguintes informações:
{
// `data` 由服务器提供的响应
data: {
},
// `status` HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: "OK",
// `headers` 服务器响应的头
headers: {
},
// `config` 是为请求提供的配置信息
config: {
}
}
2. Enviar solicitação de postagem
(1) Usando axios(config), podemos especificar seu método como post
axios({
url: '127.0.0.1:8000',
method: 'post',
data: {
// post请求的参数要用 data传递
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
(2) Use axios.post(url[, config])
axios.post('/user', {
firstName: 'Fred', //参数
lastName: 'Flintstone' //参数
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3. Envie solicitações simultâneas
Às vezes, podemos precisar enviar várias solicitações ao mesmo tempo e, em seguida, processar após várias solicitações terem recebido os dados. Podemos usaraxios.all()
O parâmetro de axios.all ([]) é uma matriz e cada elemento da matriz é uma solicitação. O resultado retornado também é uma matriz e cada elemento é o resultado da solicitação.
axios.all([
axios({
url: 'http://127.0.0.1:8000/home/multidata'
}),
axios({
url: 'http://127.0.0.1:8000/api/w6/home/data',
params: {
type: 'sell',
page: 1
},
})
]).then(res => {
console.log(res[0]); //res 是一个数组，存放每个请求的数据
console.log(res[1]);
}).catch(err => {
console.log(err);
})
O uso axios.spreadpode resultar array [res1, res2] expande res1, res2
axios.all([
axios({
url: 'http://127.0.0.1:8000/home/multidata'
}),
axios({
url: 'http://127.0.0.1:8000/home/data',
params: {
type: 'sell',
page: 1
},
})
]).then(axios.spread((res1,res2) => {
console.log(res1); //res1是第一个请求的结果
console.log(res2); //res2是第二个请求的结果
})).catch(err => {
console.log(err);
})
4. Configuração global
No exemplo acima, nosso URL base é corrigido. Na verdade, muitos parâmetros podem ser corrigidos durante o desenvolvimento. Neste momento podemos realizar alguma extração, ou usar a configuração global de axiox
axios.defaults.baseURL = 'http://127.0.0.1:8000'
axios.defaults.timeout = 5000
axios({
url: '/home/data', // url的前边就可以省略baseUrl
params: {
type: 'sell',
page: 1
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
5. Crie uma instância de axios
Quando importamos objetos do módulo axios, a instância usada é a instância padrão. Quando algumas configurações padrão são definidas para esta instância, essas configurações são corrigidas. Exatamente como o usado no código acima.
No entanto, no desenvolvimento subsequente, algumas configurações podem ser diferentes, por exemplo, certas solicitações precisam usar uma baseURL específica ou tempo limite ou tipo de conteúdo . Desta vez, podemos usar axios.create([config])para criar uma nova instância, e passar pertence às informações de configuração da instância.
//创建新的axios实例，为该实例设置特定的 baseUrl等配置
const axiosInstance = axios.create({
baseURL: 'http://127.0.0.1:8000',
timeout: 5000
})
// 使用实例发送网络请求，默认为 get请求
axiosInstance({
url:'/home/multidata'
}).then(res => {
console.log(res);
})
Cinco, embalagem do módulo
Ao fazer uma solicitação de rede, mesmo se escolhermos um axios de estrutura de terceiros, tentamos reencapsulá-lo. Não use diretamente uma estrutura de terceiros para fazer solicitações de rede, mas use um módulo que empacotamos para fazer solicitações de rede. porque?
Porque se a estrutura de terceiros repentinamente não for mantida em um determinado dia, ou houver bugs graves, lacunas graves, isso é realmente uma coisa muito perigosa. Nesse caso, se nosso aplicativo depende diretamente desta estrutura de terceiros, é muito problemático alterar a estrutura neste momento. Portanto, é melhor encapsular a estrutura de terceiros em vez de usá-la diretamente no projeto.
Podemos criar uma pasta de rede e criar o arquivo request.js na pasta
import axios from "axios";
export function request(config) {
const instance = axios.create({
baseURL: 'http://xxx',
timeout: 5000
})
return instance(config)
}
usar:
import {
request} from '../network/request'
request({
url: '/home/multidata'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
Embora encapsule apenas mais algumas linhas de código, ele reduz bastante a dependência do projeto de axios. Se um dia o projeto não estiver pronto para usar axios, basta alterar o request.js
Seis, use interceptores
A Axios fornece interceptores para que possamos realizar o processamento correspondente depois de enviar cada solicitação ou obter a resposta.
Como usar um interceptor?
export function request(config) {
//1.创建axios的实例
const instance = axios.create({
baseURL: 'http://152.136.185.210:8000/api/w6',
timeout: 5000
})
//2.axios的拦截器
//拦截请求
instance.interceptors.request.use(config => {
console.log('拦截请求成功',config);
return config;
},err => {
//可能的错误比如请求超时，可以将页面跳转到一个错误页面中。
console.log('拦截请求失败');
return err;
})
//拦截相应
instance.interceptors.response.use(response => {
console.log('拦截相应成功',response);
//对数据进行过滤
return response.data;
},err => {
console.log('拦截相应失败');
return err;
})
return instance(config)
}
Cenários para interceptar solicitações:
- Algumas informações na solicitação não atendem aos requisitos do servidor e devem ser processadas primeiro
- Cada vez que uma solicitação de rede é enviada, eu quero exibir um ícone de solicitação na interface
- Certos pedidos de rede (como login) devem conter algumas informações especiais (token)
Intercepte a cena correspondente:
-
Na interceptação bem-sucedida da resposta, os dados são filtrados principalmente.
-
Na falha na interceptação da resposta, o código de erro do erro pode ser julgado de acordo com o status e pular para diferentes páginas de prompt de erro.
7. Informação
https://gitee.com/mirrors/axios/tree/v0.20.0/
axios | Tutorial para principiantes
O link para download do código de demonstração deste blog: https://webchang.lanzous.com/ikbe5knbkwb Senha: db81