Vue 캡슐화 Axios의 용도는 무엇입니까?

Vue 캡슐화 Axios는 코드 품질을 향상시키고 더 편리하게 사용할 수 있습니다. axios의 API는 매우 친숙하여 ​​개발자가 프로젝트에서 직접 쉽게 사용할 수 있습니다. 그러나 프로젝트 규모가 커짐에 따라 HTTP 요청이 시작될 때마다 시간 제한 설정, 요청 헤더 설정 등의 작업을 작성해야 합니다. 오류 처리 등. 이런 종류의 작업 중복은 시간을 낭비할 뿐만 아니라 코드를 중복시키고 유지 관리를 어렵게 만듭니다. 코드 품질을 향상시키기 위해 프로젝트에서 axios를 사용하기 전에 두 번 캡슐화해야 더 편리할 수 있습니다. 사용합니다.

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

axios

axios는 HTTP 요청을 수행하고 풍부한 구성을 지원하며 Promise를 지원하고 브라우저 측과 Node.js 측을 지원하는 XMLHttpRequest 서비스를 기반으로 하는 경량 HTTP 클라이언트

입니다. Vue2.0부터 Youda는 vue-resource의 공식 추천을 취소하고 대신 axios를 추천하겠다고 발표했습니다. 이제 axios는 대부분의 Vue 개발자의 첫 번째 선택이 되었습니다

왜 encapsulate

axios의 API는 매우 친숙하며 프로젝트에서 직접 쉽게 사용할 수 있습니다.

그러나 프로젝트 규모가 커짐에 따라 HTTP 요청이 시작될 때마다 시간 초과 설정, 요청 헤더 설정, 프로젝트 환경에 따라 사용할 요청 주소 결정, 오류 처리 등과 같은 작업이 수행됩니다. , 모두 작성해야 합니다

이런 종류의 작업 중복은 시간을 낭비할 뿐만 아니라 코드가 중복되고 유지 관리가 어려워집니다. 우리 코드의 품질을 향상시키기 위해서는 프로젝트에서 axios를 두 번 캡슐화한 후

예를 들어

axios('http://localhost:3000/data', {
  // 配置代码
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    return data;
  }],
  // 其他请求配置...}).then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);});

를 사용해야 합니다. 각 페이지에서 유사한 요청을 보내면 많은 구성 및 오류 처리를 작성해야 하지만, 그냥 그럴 것 같습니다. 너무 번거롭습니다

이제 좀 더 편리하게 사용할 수 있도록 axios를 다시 캡슐화해야 합니다

캡슐화 방법

캡슐화하는 동안 백엔드, 요청 헤더, 상태 코드와 몇 가지 계약을 협상해야 합니다. , 요청 시간 초과...

인터페이스 요청 접두사 설정: 개발, 테스트, 프로덕션 환경에 따라 접두사를 구분해야 합니다

요청 헤더: 일부 특정 서비스를 구현하려면 일부 매개 변수를 전달해야 합니다. 그런 다음에만 요청할 수 있습니다. (예: 멤버십 비즈니스)

상태 코드: 인터페이스에서 반환되는 다양한 상태에 따라 다양한 서비스가 실행될 수 있습니다. 이는 백엔드와 합의해야 합니다.

요청 방법: 기반으로 다시 캡슐화를 수행합니다. get, post 및 기타 메소드를 사용하는 것이 더 편리합니다

요청 인터셉터: 요청 헤더 설정에 따라 액세스할 수 있는 요청을 결정합니다.

응답 인터셉터: 이 블록은 백엔드에서 반환된 상태 코드를 기반으로 하여 다양한 서비스 실행

인터페이스 요청 접두사 설정

노드 환경 변수를 사용하여 개발, 테스트 및 프로덕션 환경을 구별하기 위한 판단

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

로컬에서 디버깅할 때 vue.config에서 devServer도 구성해야 합니다. 교차 도메인을 구현하려면

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

요청 헤더 및 시간 초과 시간 설정

대부분의 경우 요청 헤더가 수정됩니다. 여기에는 몇 가지 특수 요청 헤더가 필요합니다. 범용 요청 헤더를 기본 구성으로 사용합니다. 특수 요청 헤더가 필요한 경우 특수 요청 헤더를 매개변수로 전달하여 기본 구성을 덮어씁니다

const service = axios.create({
    ...
    timeout: 30000,  // 请求 30s 超时
	  headers: {
        get: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        },
        post: {
          'Content-Type': 'application/json;charset=utf-8'
          // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
        }
  },
})

요청 메소드 캡슐화

먼저 캡슐화된 메소드를 도입한 후 인터페이스의 메소드로 다시 캡슐화합니다. 호출해서 노출시키세요

// get 请求
export function httpGet({
  url,
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params
    }).then((res) => {
      resolve(res.data)
    }).catch(err => {
      reject(err)
    })
  })
}

// post
// post请求
export function httpPost({
  url,
  data = {},
  params = {}
}) {
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: 'post',
      transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      // 发送的数据
      data,
      // url参数
      params

    }).then(res => {
      resolve(res.data)
    })
  })
}

캡슐화된 메소드를 api.js 파일에 넣어주세요

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

페이지에서 직접 호출하실 수 있습니다

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
  console.log(res)
})

이렇게 하면 앞으로 API 유지보수와 수정을 통일적으로 관리하실 수 있습니다. api.js 파일에서만 하면 됩니다

요청 인터셉터

요청 인터셉터는 각 요청에 토큰을 추가할 수 있으며, 통합 처리 후 유지 관리가 쉽습니다.

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，此处token一般是用户完成登录后储存到localstorage里的
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

Response 인터셉터

Response 인터셉터는 상태 코드를 기반으로 로그인 상태 및 승인을 판단하는 등의 작업을 수행합니다. 절대적인 표준은 없습니다. 패키지가 프로젝트 요구 사항을 충족하고 사용하기 쉽다면 좋은 패키지 솔루션입니다

[관련 권장 사항: vuejs 비디오 튜토리얼,

웹 프론트 엔드 개발

]

위 내용은 Vue 캡슐화 Axios의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!