기사 디렉토리
I. 소개
Vue에서 네트워크 요청을 보내는 방법은 여러 가지가 있습니다. 개발 중에는 어떻게 선택해야할까요?
1. 우리는 종종 jQuery-Ajax를 사용합니다 (기존 Ajax에 비해 사용하기 매우 쉬움). 왜 그것을 선택하지 않습니까?
- 먼저 명확하게하자 : jQuery는 Vue의 전체 개발에서 거의 사용되지 않습니다.
- 따라서 네트워크 요청을 용이하게하기 위해 jQuery를 구체적으로 인용하는 것은 합리적이지 않습니다.
- jQuery의 코드는 1w + 라인이고 Vue의 코드는 1w + 라인입니다.
- 따라서 네트워크 요청을 사용하기 위해이 무거운 프레임 워크를 인용 할 필요가 없습니다.
2. Vue 1.x가 정식 출시되었을 때 Vue-resource가 출시되었으며, Vue-resource의 볼륨은 jQuery보다 훨씬 적고 Vue-resource가 정식 출시되었습니다. 왜 선택하지 않습니까?
- Vue2.0 출시 후 Vue 작성자는 GitHub의 Issues에서 vue-resource 제거에 대해 설명했으며 향후 업데이트되지 않습니다.
- 그런 다음 vue-reource가 더 이상 새 버전을 지원하지 않으면 업데이트 및 유지 관리가 계속되지 않습니다.
- 향후 프로젝트 개발 및 유지 관리에는 숨겨진 위험이 많습니다.
3. 사용 axios
vue-resource가 더 이상 업데이트 및 유지 관리되지 않을 것이라고 말하면서 vue 작성자는 다음 프레임 워크를 권장합니다. axios
둘째, axios 소개
Axios의는 것입니다 약속 기반 브라우저와 nodejs에 대한 HTTP 클라이언트입니다. 그것은 최신 ES 규격에 대한 약속과 부합 함을 선언의 구현 버전입니다 점을 제외하고 기본적으로 네이티브 XHR의 캡슐화입니다. axios는 간단한 디자인, 간단한 API, 브라우저 및 노드 지원
풍모:
- 브라우저에서 XMLHttpRequests 요청 보내기
- node.js에서 http 요청 보내기 지원
- Promise API 지원
- 요청 및 응답 차단
- JSON 데이터 자동 변환
- 요청 및 응답 데이터 등을 변환합니다.
여러 요청 방법 지원 :
- axios (구성)
- axios.request (config)
- axios.get (url [, 구성])
- axios.delete (url [, 구성])
- axios.head (url [, 구성])
- axios.post (url [, 데이터 [, 구성]])
- axios.put (url [, 데이터 [, 구성]])
- axios.patch (url [, 데이터 [, 구성]])
셋, 설치
vue에서 사용하기 위해 vue-cli로 프로젝트를 만들어 시연했습니다. 이 블로그 하단에 학습 및 커뮤니케이션을위한 데모 코드 다운로드 링크가 있습니다.
npm install axios --save
네, 기본 사용
1. 받기 요청 보내기
(1)를 사용 axios(config)하면 기본적으로 get 요청을 보냅니다.
axios({
url: '127.0.0.1:8000',
//拼接参数
params: {
name: 'webchang',
page: 1
},
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
참고 : axios는 Promise 기반 이므로 실행 axios({ url: 'xxx' })은 Promise를 반환합니다. 데이터를 성공적으로 가져 오면 호출이 내부적으로 해결되므로 그 뒤에 then () 메서드를 추가 할 수 있습니다.
(2) axios.get(url[, config])매개 변수없이 사용
axios.get('http://127.0.0.1:8000')
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
})
(3) axios.get(url[, config])매개 변수와 함께 사용
axios.get('http://127.0.0.1:8000', {
params: {
name: 'webchang',
page: 1
}
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
get 요청의 경우 매개 변수를 URL 뒤에 직접 스플 라이스 할 수도 있습니다.
axios.get('http://127.0.0.1:8000?name=webchang')
axios 요청에 대한 응답에는 다음 정보가 포함됩니다.
{
// `data` 由服务器提供的响应
data: {
},
// `status` HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: "OK",
// `headers` 服务器响应的头
headers: {
},
// `config` 是为请求提供的配置信息
config: {
}
}
2. 게시 요청 보내기
(1)를 사용하여 axios(config)게시 방법을 지정할 수 있습니다.
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) 사용 axios.post(url[, config])
axios.post('/user', {
firstName: 'Fred', //参数
lastName: 'Flintstone' //参数
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3. 동시 요청 보내기
때로는 여러 요청을 동시에 보낸 다음 여러 요청이 데이터를 수신 한 후 처리해야 할 수 있습니다. 우리는 사용할 수 있습니다axios.all()
axios.all ([])의 매개 변수는 배열이고 각 배열 요소는 요청입니다. 반환 된 결과도 배열이며 각 요소는 요청의 결과입니다.
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);
})
사용 axios.spread결과 배열 [res1, res2]가 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. 글로벌 구성
위의 예에서는 baseURL이 고정되어 있지만 실제로 개발 중에 많은 매개 변수가 수정 될 수 있습니다. 이때 일부 추출을 수행하거나 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. axios의 인스턴스 생성
axios 모듈에서 개체를 가져올 때 사용되는 인스턴스가 기본 인스턴스입니다. 이 인스턴스에 대해 일부 기본 구성이 설정되면 이러한 구성이 수정됩니다. 위의 코드에서 사용 된 것과 같습니다.
그러나 후속 개발에서는 일부 구성이 다를 수 있습니다. 예를 들어 특정 요청은 특정 baseURL 또는 시간 제한 또는 content-Type을 사용해야합니다 . 이번에 axios.create([config])는 새 인스턴스를 생성하는 데 사용할 수 있으며 패스는 인스턴스의 구성 정보에 속합니다.
//创建新的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);
})
다섯, 모듈 패키징
네트워크 요청을 할 때 타사 프레임 워크 axios를 선택하더라도 다시 캡슐화하려고합니다. 타사 프레임 워크를 직접 사용하여 네트워크 요청을하지 말고 우리가 패키지 한 모듈을 사용하여 네트워크 요청을 만드십시오. 왜?
타사 프레임 워크가 갑자기 특정 일에 유지되지 않거나 심각한 버그, 심각한 허점이있는 경우 이는 실제로 매우 위험한 일이기 때문입니다. 이 경우 애플리케이션이이 타사 프레임 워크에 직접 의존하는 경우 현재 프레임 워크를 변경하는 것이 매우 번거 롭습니다. 따라서 프로젝트에서 직접 사용하는 대신 타사 프레임 워크를 캡슐화하는 것이 좋습니다.
네트워크 폴더를 만들고 폴더에 request.js 파일을 만들 수 있습니다.
import axios from "axios";
export function request(config) {
const instance = axios.create({
baseURL: 'http://xxx',
timeout: 5000
})
return instance(config)
}
사용하다:
import {
request} from '../network/request'
request({
url: '/home/multidata'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
몇 줄의 코드 만 캡슐화 할 뿐이지 만 axios에 대한 프로젝트의 의존성을 크게 줄여줍니다. 언젠가 프로젝트가 axios를 사용할 준비가되지 않은 경우 request.js를 변경하십시오.
여섯, 인터셉터 사용
Axios는 각 요청을 전송하거나 응답을받은 후 해당 처리를 수행 할 수 있도록 인터셉터를 제공합니다.
인터셉터를 사용하는 방법?
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)
}
요청을 가로채는 시나리오 :
- 요청의 일부 정보가 서버의 요구 사항을 충족하지 않으며 먼저 처리해야합니다.
- 네트워크 요청이 전송 될 때마다 인터페이스에 요청 된 아이콘을 표시하고 싶습니다.
- 특정 네트워크 요청 (예 : 로그인)은 일부 특수 정보 (토큰)를 전달해야합니다.
해당 장면 차단 :
-
응답의 성공적인 가로 채기에서 데이터는 주로 필터링됩니다.
-
응답 차단 실패시 상태에 따라 오류의 오류 코드를 판단하고 다른 오류 프롬프트 페이지로 이동할 수 있습니다.
7. 정보
https://gitee.com/mirrors/axios/tree/v0.20.0/
이 블로그의 데모 코드 다운로드 링크 : https://webchang.lanzous.com/ikbe5knbkwb 비밀번호 : db81