Vue 전단 의 axios 패키지 및 사용 에 대한 자세 한 설명

Axios 는 promise 기반 HTTP 라 이브 러 리 입 니 다.axios 를 밀봉 한 후에 더욱 효율 적 인 개발 과 유지 가 편리 하고 앞으로 의 프로젝트 에서 도 직접 사용 할 수 있 기 때문에 포장 이 필요 합 니 다.많은 방법 을 참고 한 후에 나 는 내 가 매우 실 용적 이 라 고 생각 하 는 방법 을 맞 추 었 다.
우선 http 디 렉 터 리 에 있 는 두 파일 입 니 다.
helper.js
이것 은 기능 성 파일 로 url,필터 파라미터 등 을 포함 하여 하나의 파일 에 집합 하여 유지 와 수정 을 편리 하 게 합 니 다.
한번 읽 어보 고 무슨 기능 이 있 는 지 알 면 돼 요.

const helper = {
 //   name         
 getQueryString (name) {
  let reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`)
  let hash = window.location.hash
  let search = hash.split('?')
  let r = search[1] && search[1].match(reg)
  if (r != null) return r[2]; return ''
 },
 //      url
 queryString (url, query) {
  let str = []
  for (let key in query) {
   str.push(key + '=' + query[key])
  }
  let paramStr = str.join('&')
  return paramStr ? `${url}?${paramStr}` : url
 },
 
//          JS
 toType(obj) {
	 return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
	},
//       
 filterNull(o) {
	 for (var key in o) {
	  if (o[key] === null) {
	   delete o[key]
	  }
	  if (toType(o[key]) === 'string') {
	   o[key] = o[key].trim()
	  } else if (toType(o[key]) === 'object') {
	   o[key] = filterNull(o[key])
	  } else if (toType(o[key]) === 'array') {
	   o[key] = filterNull(o[key])
	  } else if (toType(o[key]) === 'number') {
	   o[key] = filterNull(o[key])
	  }
	 }
	 return o
	}

}
export default helper

http.js
요청 을 받 고 인 터 페 이 스 를 노출 합 니 다.매개 변수 params,백 엔 드 로 보 내 는 url 과 token(JWT 를 사용 하지 않 는 학생 은 매개 변수 token 을 생략 할 수 있 습 니 다)을 포함 하고 처리 후 백 엔 드 로 보 냅 니 다.

import axios from 'axios'
let qs = require('querystring')
import helper from './helper'

//console.log( process.env.NODE_ENV)
//      baseURL，          
let root = process.env.NODE_ENV === 'development'
 //     api  
 ?
 `http://localhost:3001/api`
 //     api  
 :
 `http://127.0.0.1:3001/api`;
//   axios，     
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


function apiAxios(method, url, params, token) {
 if (params) {
  params = helper.filterNull(params)
 }
 return axios({
  method: method,
  //    
  url: method === 'GET'|| method === 'DELETE' ? helper.queryString(url,params) : url,
  data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
  baseURL: root,
  timeout: 10000,
  headers: { Authorization: `Bearer ${token}` },	//jwt
  withCredentials: false
 })
}

//    vue        
export default {
 get: function (url, params, token) {
  return apiAxios('GET', url, params, token)
 },
 post: function (url, params, token) {
  return apiAxios('POST', url, params, token)
 },
 put: function (url, params, token) {
  return apiAxios('PUT', url, params, token)
 },
 delete: function (url, params, token) {
  return apiAxios('DELETE', url, params, token)
 },
}

api.js
전단 api 인 터 페 이 스 를 밀봉 하고 전단 페이지 에서 보 내 온 요청 을 받 아들 입 니 다.패 키 징 후 함수 명 에 따라 유형 과 url 을 판단 하여 axios 파일 에 보 내 고 유지 와 개발 에 편리 합 니 다.

import http from '../http/http.js'
export default {
 login(data, token){
  return http.post("/login",data, token)
 },
 getUserInfo(data, token){
  return http.get("/getUserInfo",data, token)
 }
}

main.js 에서 인용 하면 전역 호출 이 가능 합 니 다.
전단 에 this.$api.url Name()형식 으로 요청 을 보 낼 수도 있 고 api 를 거치 지 않 고 this.$http 를 사용 할 수도 있 지만 매번 url 을 써 야 합 니 다.인터페이스 가 많 을 때 귀 찮 습 니 다.그래서 api 로 포장 하 는 것 을 추천 합 니 다.

import api from './api/api.js'
import http from './http/http.js'
//      
Vue.prototype.$api = api

Vue.prototype.$http = http

전단 에서 사용:
axios 는 promise 대상 으로 돌아 가기 때문에 백 엔 드 에서 보 낸 response 를'then'형식 으로 받 은 다음 에 해당 하 는 피드백 을 해 야 합 니 다.

//   this.$api  api   ，     api     this.$http
 this.$api.login(data, token).then((res) => {
	console.log(res)
 }).catch((err) => {
 	console.log(res)
 })

위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 전단 이 axios 의 패 키 징 과 사용 에 대한 상세 한 통합 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!