면책 조항 :이 문서는 블로거 원본입니다, 추적 에 의해-SA의 CC 4.0 저작권 계약, 복제, 원본 소스 링크이 문을 첨부 해주세요.
Axios의 인터셉트 요청 응답을 사용하여 요청을 응답 메시지에 응답하여, 예를 들면, 균일있다 때 도움이 차단 상태 코드가되도록 토출 에러 메시지가 결정된다. 해제 요청이 시간을 요청, 당신은 편리하게 요청 또는 캐치를 처리하는 데 사용할 수있다.
설치
npm install axios --save
http.js 파일을 설정
은 / SRC / 유틸 / 디렉토리에 htttp.js 수립
1. 먼저 도입하고 Axios의 라우터.
import axios from 'axios';
import router from '../router';
2. Axios의 요청은 매개 변수를 설정.
axios.defaults.timeout = 5000; //请求超时5秒
axios.defaults.baseURL =''; //请求base url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post请求是的header信息
당신이 쿠키를 수행하기 위해 요청을 세션 기능이 코드를 사용하는 경우에는 다음 줄을 추가 할 수 있습니다 :
axios.defaults.withCredentials = true
요청이 전송 될 전에 3. 그런 다음, 우리는 우리가, 아래의 코드, 우리는 헤더 정보를 추가 요청을 제공으로, 헤더 토큰 추가 등의 정보를 추가 요청할 수 있도록 모든 요청을해야합니다, 인터셉터를 추가 할 수있는 요청을 제공 헤더의 토큰 정보를 전달. 이것은 종종 우리의 인터페이스 개발에 사용된다.
//http request 拦截器
axios.interceptors.request.use(
config => {
let token = sessionStorage.getItem('token')
if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers = {
'X-token': token
}
}
return config
},
err => {
return Promise.reject(err)
}
)
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
4. 다음으로, 우리는 반환 요청 인터셉터 봐.
예를 들어, 우리가 요청을 보내, 그것은, 프런트 엔드 정보 메시지를 표시해야 백 엔드 경우 오류 코드를 반환합니다. 예를 들어, 배경이 액세스 인터셉터에서 수행 할 수있는 로그인 페이지로 이동하는 것을 허용하지 않습니다 반환 할 수있는 권한을 가지고 있지 않습니다.
axios.interceptors.response.use(
response => {
if (response.data.code === 4003) {
Toast({
mes: '您没有权限操作！',
timeout: 1500,
callback: () => {
router.go(-1);
}
});
return false;
}
if (response.data.code === -1) {
localStorage.removeItem('token')
router.push({
path:"/login",
querry:{redirect: router.currentRoute.fullPath}//从哪个页面跳转
})
}
return response
},
err => {
if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
Toast({
mes: '网络异常，连接超时...',
timeout: 1500
});
}
return Promise.reject(err)
}
)
5. 이제 우리는 방법 포장을 얻을 :
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function get(url, params={}, headers={}){
return new Promise((resolve, reject) => {
axios.get(url,{
params: params,
headers: headers
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
제 소식을 재 밀봉하는 방법 :
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {}){
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
용도
에 main.js에 도입 :
import {post,get} from './utils/http'
//定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;
어셈블리에서 사용 :
this.$post(url, params)
.then((res) => {
if (res.result === 'success') {
this.$message({
message: '登录成功！',
type: 'success'
})
this.$router.push('/main')
} else {
this.$message.error(res.msg)
this.refreshCode();
}
});
이 코드는 포스트 코드 샘플 사용자의 로그인 요청을 전송, 다른 요청이 같은 접근 방식 얻을.