axios 의 간단 한 패키지 및 인 스 턴 스 코드 사용

머리말
최근 프로젝트 를 구축 할 때 요청 한 패 키 징 을 생각 하고 어떻게 패 키 징 해 야 좋 을 지 고민 했다.사내 들 에 게 는 작은 일 일 수도 있 지만 저 에 게 는 작은 도전 이 라 고 할 수 있 습 니 다.내 가 생각 하기에 요청 한 기본 설정 과 구체 적 인 인 인 터 페 이 스 는 두 개의 파일 에 두 어야 하기 때문에 나 는 두 개의 파일 axios.js 와 api.js 를 새로 만 들 었 다.
axios.js
axios.js 는 주로 axios 에 대한 기본 설정 입 니 다:baseURL  요청 차단기  응답 차단기 등등

import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from '../router';

우선 현재 js 에 axios 를 도입 합 니 다.element 를 도입 하 는 것 은 현재 js 에서 구성 요 소 를 사용 할 수 있 도록 하 는 것 입 니 다.응답 차단기 에서 각종 반환 값 을 직접 제시 하기 위해 서 입 니 다.라 우 터 를 도입 한 것 은 응답 차단기 에서 구체 적 인 반환 값 에 따라 페이지 를 이동 하기 위해 서 입 니 다.예 를 들 어 권한 이 없 으 면 로그 인 페이지 로 이동 합 니 다.

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'api';
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://xxxxxxxxxx/index/';
}

baseURL 의 처리 에 대해 저 는 개발 환경 과 생산 환경 을 구분 하 였 습 니 다.

//                   formdata     
axios.interceptors.request.use((config) => {
  config.headers['Content-Type'] = 'application/json';
  if (config.method === 'post') {
    //FormData     
    if (Object.prototype.toString.call(config.data) === '[object FormData]') {
      //        
      config.headers['Content-Type'] = 'multipart/form-data';
    } else if (Object.prototype.toString.call(config.data) === '[object String]') {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
  } else {
    config.headers['Content-Type'] = 'application/json';
  }
  return config;
});

//     
axios.interceptors.response.use(
  (config) => {
    let value = config.data;
    if (config.status && config.status === 200) {
      if (typeof value === 'string') {
        if (value === 'timeout') {
          ElementUI.MessageBox.confirm('               ，           ?', '  ', {
            confirmButtonText: '  ',
            type: 'warning'
          }).then(() => {
            router.push({ name: 'login' });
          });
        }else {
          ElementUI.Message.info(value);
        }
      }
    }
    return config;
  },
  (err) => {
    let value = err.response.statusText;
    switch (err.response.status) {
      case 400:
        ElementUI.Message.error('      ，          ')
        break;
      case 401:
      case 403:
      case 404:
      case 405:
        ElementUI.Message.warning(value);
        break;
      default:
        ElementUI.Message.error('      ，      ！' + value);
        break;
    }
    return err.response
  }
);

응답 차단기 에 대해 서 는 제 백 엔 드 가 되 돌아 오 는 값 에 따라 처리 합 니 다.백 엔 드 를 별로 하지 않 았 기 때문에 되 돌아 오 는 것 에 대해 서 만 간단하게 처 리 했 습 니 다.
다음은 get 과 post 에 대한 패키지 입 니 다.

export async function axiosGet(url, params = {}) {
  let res = await axios.get(url, { params: params });
  if(res.status === 200){
    return res.data
  }else {
    throw res.statusText
  }
}

export async function axiosPost(url, params = {}) {
  let res = await axios.post(url, params);
  if(res.status === 200){
    return res.data
  }else {
    throw res.statusText
  }
}

async 와 await 를 사용 하여 반환 값 을 직접 가 져 와 판단 합 니 다.반환 에 성공 하면 출력 반환 값 이 성공 하지 못 하면 오 류 를 던 집 니 다.
마지막 으로 봉 인 된 방법 내 보 내기
api.js
전체 api.js 는 프로젝트 내 모든 인터페이스 가 저 장 된 곳 입 니 다.

import { axiosGet,axiosPost } from './axios'

axios.js 를 도입 하여 봉 인 된 axios Get 과 axios Post 를 가 져 옵 니 다

export default {
  getLogin:(params = {}) => {
    return axiosPost('/login', params)
  },
  getUser:(params = {}) => {
    return axiosGet('http://localhost:3000/user', params)
  }
}

여기 서 나 는 간단 한 두 개의 인 터 페 이 스 를 사용 하여 예 를 들 었 는데,api.js 에서 의 처 리 는 이미 완성 되 었 다.
설 정 된 인터페이스 사용 하기
여기까지 우리 의 axios 는 이미 봉인 을 마 쳤 습 니 다.다음은 사용 한 시범 입 니 다.

import DbauditServer from '@/server/api'
//            api.js

let formData = new FormData
formData.append('password', this.formLabelAlign.password)
let res1 = await DbauditServer.getLogin(formData) //            
let res2 = await DbauditServer.getUser()

물론 섬세 할 수도 있 습 니 다.이전에 get 과 post 를 봉인 할 때 오류 가 발생 하면 반환 값 을 직접 던 지기 때문에 인터페이스의 호출 도 try catch 로 감 싸 서 error 를 특정한 처리 하면 됩 니 다.
총결산
여기 서 axios 에 관 한 간단 한 패 키 징 과 사용 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 axios 간단 한 패 키 징 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!