이 기사에서는 Axios가 무엇인지 설명합니다. 비즈니스 시나리오를 기반으로 한 Axios의 2차 캡슐화에 대한 자세한 설명(예)은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

axios

axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다.
Vue든 React든 Axios를 네트워크 요청 라이브러리로 사용하는 프로젝트는 프런트엔드 프레임워크에서도 널리 사용됩니다.
저는 최근 여러 프로젝트에서 axios를 사용했고, axios를 기반으로 일반적인 비즈니스 시나리오를 기반으로 하는 공통 요청 서비스를 캡슐화했습니다.

비즈니스 시나리오:

1. 전역 요청 구성.

2. get, post, put, delete 및 기타 요청의 캡슐화를 약속합니다.

3. 애니메이션 로딩 등에 대한 글로벌 요청 상태 관리

4. 경로 점프는 현재 페이지 요청을 취소합니다.

5. 요청은 토큰을 전달하며 권한 오류는 균일하게 관리됩니다.

기본 구성

전역 기본 구성 정의

axios.defaults.timeout = 10000 //超时取消请求
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = process.env.BASE_URL //挂载在process下的环境常量，

사용자 정의 구성(일반적인 비즈니스 시나리오는 아님, 소개)

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.another.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

우선순위: 사용자 정의 구성> 기본 구성

요청 및 응답 인터셉터

요청 인터셉터

// 请求列表
const requestList = []
axios.interceptors.request.use((config) => {
  //1.将当前请求的URL添加进请求列表数组
  requestList.push(config.url)
  //2.请求开始，改变loading状态供加载动画使用
  store.dispatch('changeGlobalState', {loading: true})
  //3.从store中获取token并添加到请求头供后端作权限校验
  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

1 . 요청 취소 및 로딩 상태 관리를 준비하기 위해 요청 인터셉터의 요청 목록 변수에 요청된 모든 URL을 추가합니다
2. 요청이 시작되면 애니메이션 로딩 효과를 켤 수 있습니다.
3. 로그인 후 사용자는 응답이 반환된 후

Response 인터셉터

axios.interceptors.response.use(function (response) {
  // 1.将当前请求中请求列表中删除
  requestList.splice(requestList.findIndex(item => item === response.config.url), 1)
  // 2.当请求列表为空时，更改loading状态
  if (requestList.length === 0) {
    store.dispatch('changeGlobalState', {loading: false})
  }
  // 3.统一处理权限认证错误管理
  if (response.data.code === 900401) {
    window.ELEMENT.Message.error('认证失效，请重新登录！', 1000)
    router.push('/login')
  }
  return response
}, function (error) {
  // 4.处理取消请求
  if (axios.isCancel(error)) {
    requestList.length = 0
    store.dispatch('changeGlobalState', {loading: false})
    throw new axios.Cancel('cancel request')
  } else {
    // 5.处理网络请求失败
    window.ELEMENT.Message.error('网络请求失败', 1000)
  }
  return Promise.reject(error)
})

1을 사용하여 권한 확인을 위해 요청 헤더에 토큰을 포함할 수 있습니다. , 해당 요청을 요청 목록에서 삭제
2. 요청 목록이 비어 있으면 모든 요청이 종료되고 로딩 애니메이션이 종료됩니다
3. 통합 차단 처리를 보고하는 권한 인증 오류
4. 취소 요청 처리는 합쳐야 함 기타 코드 설명
5. 프로젝트 백엔드는 RESTful 스타일의 인터페이스 요청을 사용하지 않으므로 200개를 제외한 모든 요청은 네트워크 요청 실패로 분류됩니다

promise encapsulation 및 취소 요청

const CancelToken = axios.CancelToken
//cancel token列表
let sources = []
const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign({}, config, {
    //1.通过将执行程序函数传递给CancelToken构造函数来创建cancel token
      cancelToken: new CancelToken(function executor (c) {
      //2.将cancel token存入列表
        sources.push(c)
      })
    })).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
        console.log(err)
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, 'post')
}

const get = (url, params, config = {}) => {
  return request(url, params, config, 'get')
}
//3.导出cancel token列表供全局路由守卫使用
export {sources, post, get}

2. 취소해야 하는 요청 목록을 저장하고 사용하기 위해 네비게이션 가드로 내보냅니다
3.router. js

...
import { sources } from '../service/request'
...
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || to.name
    //路由发生变化时取消当前页面网络请求
  sources.forEach(item => {
    item()
  })
  sources.length = 0
  next()
})

// 引入网络请求库 https://github.com/axios/axios

import axios from 'axios'
import store from '../store'
import router from '../router'

// axios.defaults.timeout = 10000
const requestList = []

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

axios.defaults.baseURL = process.env.BASE_URL
// 自定义拦截器
axios.interceptors.request.use((config) => {
  requestList.push(config.url)
  store.dispatch('changeGlobalState', {loading: true})
  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  requestList.splice(requestList.findIndex(item => item === response.config.url), 1)
  if (requestList.length === 0) {
    store.dispatch('changeGlobalState', {loading: false})
  }
  if (response.data.code === 900401) {
    window.$toast.error('认证失效，请重新登录！', 1000)
    router.push('/login')
  }
  return response
}, function (error) {
  requestList.length = 0
  store.dispatch('changeGlobalState', {loading: false})
  if (axios.isCancel(error)) {
    throw new axios.Cancel('cancel request')
  } else {
    window.$toast.error('网络请求失败！', 1000)
  }
  return Promise.reject(error)
})

const CancelToken = axios.CancelToken
let sources = []

const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign(config, {
      cancelToken: new CancelToken(function executor (c) {
        sources.push(c)
      })
    })).then(response => {
      resolve(response.data)
    }, err => {
      reject(err)
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, 'post')
}

const get = (url, params, config = {}) => {
  return request(url, params, config, 'get')
}

export {sources, post, get}

로그인 후 복사

위 내용은 액시오스란 무엇인가? 비즈니스 시나리오를 기반으로 한 Axios의 2차 캡슐화에 대한 자세한 설명(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!