Vue에서 타사 요청을 구현하는 방법

藏色散人
풀어 주다: 2023-01-29 14:41:40
원래의
1588명이 탐색했습니다.

Vue는 타사 요청을 구현합니다. 1. "'axios'에서 axios 가져오기;"를 통해 axios를 가져옵니다. 2. 프로토타입 체인에 axios를 배치합니다. 3. "axios.interceptors.request"와 같은 코드로 요청 인터셉터를 추가합니다. use(config => {...}".

Vue에서 타사 요청을 구현하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터

vue는 타사 요청을 어떻게 구현합니까?

in vue --axios

1 axios에서 타사 데이터 요청 -> Promise 객체 기반-> async & wait

2 생성 단계-> Promise 객체 반환-> 직접 분해 [데이터 처리]

  • 인스턴스의 데이터(즉, 페이지 렌더링에 사용되는 데이터)를 쓰려면 구성 매개변수 데이터를 사용하여 이를 받아야 합니다.

3 import axios from 'axios';

4개의 axios를 여러 번 가져와 사용함 -> 프로토타입 체인에 axios 넣기

import axios from 'axios';
Vue.prototype.axios = axios;
로그인 후 복사

5 요청 메소드의 별칭

  • axios.request(config)axios.request(config)

  • axios.get(url[, config])

  • axios.delete(url[, config])

  • axios.head(url[, config])

  • axios.options(url[, config])

  • axios.post(url[, data[, config]])

  • axios.put(url[, data[, config]])

  • axios.patch(url[, data[, config]])

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url [, 구성])

🎜🎜axios .options(url[, config])🎜🎜🎜🎜axios.post(url[, data[, config]] )🎜🎜🎜🎜axios.put(url [, data[, config]])🎜🎜🎜🎜axios.patch(url[, data[, config]] )🎜🎜🎜🎜6 Interceptor🎜
// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});
로그인 후 복사
🎜6.1 요청 차단 애플리케이션 🎜
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  let token = sessionStorage.getItem('userTk');
  if (token) {
    config.headers.Authorization = token
  }
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});
로그인 후 복사
🎜6.2 응답 차단 애플리케이션 🎜
axios.interceptors.response.use(response => {
  if (response.data.code === '200') {
    Auth.setToken(sessionStorage.getItem('userId'))
  }
  return response;
},
error => {
  console.warn(error);
  console.warn(error.response);
  if ((error.response.status && error.response.status === 401) || error.response.statusCode === 401) {
    // 已超时
    Auth.removeToken(sessionStorage.getItem('userId'));
    sessionStorage.clear();
    router.replace('/login')
    return Promise.reject('身份已过期,请重新登录!');
  }
  if(error.response && error.response.status === 500)
  return Promise.reject('服务异常,请稍后重试!');
});
로그인 후 복사
🎜 추천 학습: "🎜vue 비디오 튜토리얼🎜"🎜

위 내용은 Vue에서 타사 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
vue
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿