이번에는 Axios 오류 처리 방법과 Axios 오류 처리 시 주의사항이 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
이제 vue의 공식 패키지는 더 이상 vue-resource를 업데이트하지 않고 대신 axios를 권장합니다. 다음은 실제 프로젝트에 요약된 axios 플러그인 설정입니다.
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from 'axios' // 拦截request,设置全局请求为ajax请求 axios.interceptors.request.use((config) => { config.headers['X-Requested-With'] = 'XMLHttpRequest' return config }) // 拦截响应response,并做一些错误处理 axios.interceptors.response.use((response) => { const data = response.data // 根据返回的code值来做不同的处理(和后端约定) switch (data.code) { case '0': // 举例 // exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题 if (isIOS()) { // 异步以保证数据已渲染到页面上 setTimeout(() => { // 通过滚动强制浏览器进行页面重绘 document.body.scrollTop += 1 }, 0) } // 这一步保证数据返回,如果没有return则会走接下来的代码,不是未登录就是报错 return data // 需要重新登录 case 'SHIRO_E5001': // 微信生产环境下授权登录 if (isWeChat() && IS_PRODUCTION) { axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => { location.replace(global.decodeURIComponent(result)) }) } else { // 否则跳转到h5登录并带上跳转路由 const search = encodeSearchParams({ next: location.href, }) location.replace(`/user/login?${search}`) } // 不显示提示消息 data.description = '' break default: } // 若不是正确的返回code,且已经登录,就抛出错误 const err = new Error(data.description) err.data = data err.response = response throw err }, (err) => { // 这里是返回状态码不为200时候的错误处理 if (err && err.response) { switch (err.response.status) { case 400: err.message = '请求错误' break case 401: err.message = '未授权,请登录' break case 403: err.message = '拒绝访问' break case 404: err.message = `请求地址出错: ${err.response.config.url}` break case 408: err.message = '请求超时' break case 500: err.message = '服务器内部错误' break case 501: err.message = '服务未实现' break case 502: err.message = '网关错误' break case 503: err.message = '服务不可用' break case 504: err.message = '网关超时' break case 505: err.message = 'HTTP版本不受支持' break default: } } return Promise.reject(err) }) axios.install = (Vue) => { Vue.prototype.$axios = axios } export default axios
에서 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 이 기사를 참조하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!
추천 자료:
Baidu의 BAE를 통해 vue 프로젝트를 게시하는 방법
AngularJS에서 @HostBinding()과 @HostListener()의 차이점은 무엇입니까
axios http 요청을 사용할 수 없는 이유 vue2
위 내용은 Axios 오류를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!