vue 에서 axios 의 사용 과 패 키 징 을 자세히 설명 합 니 다.

나의 axios 패키지 공유
axios 는 사용 하기 좋 은 플러그 인 입 니 다.모두 params 대상 이기 때문에 통일 적 으로 처리 하기 쉽 습 니 다.
물론 우선 npm 설치 axios 는 간단 합 니 다$npm install axios--save
src 에서 새 폴 더 service/index.js
코드 를 잇다

import axios from 'axios';
import { Toast} from 'mint-ui';//    mint                      
import router from '../router'

//       
axios.defaults.timeout = 50000;

//       
axios.defaults.baseURL ='';

//http request    
axios.interceptors.request.use(
 config => {
  //   token
  const token = localStorage.getItem('cc_token');
  //       
  if(!config.headers['Content-Type']){
   config.headers = {
    'Content-Type':'application/json',
   };
  }
  //   token headers
  if(token){
   config.headers.token = token
  }
  //       
  if(config.method === 'get'){
    //get       params ，     data 
   config.params = config.params || {};
   let json = JSON.parse(JSON.stringify(config.params));
   //      
  }else{
   config.data = config.data || {};
   //      
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);

이상 의 요청 전 처리 가 완료 되 었 습 니 다.
다음은 되 돌아 오 는 처리 입 니 다.

//http response    
axios.interceptors.response.use(
 response => {
  //    code     
  if(response.data.code === 501){
   //     
   //            ，        
   router.push({
    name:'login',//       
    query:{
     retUrl:window.location.href.split('#')[1] || '',
     is_new_user_url:1
    }
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error)
 }
);

이어서 모든 요청 유형 을 간단하게 봉인 합 니 다.

/**
 *   get  
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url,params={}){
 return new Promise((resolve,reject) => {
  axios.get(url,{
   params:params
  })
   .then(response => {
    if(response.data.code === 200){
    //                     res   
     resolve(response.data.data);//               data          
    }else{
    //    
     Toast(response.data.msg)
    }
   })
   .catch(err => {
    reject(err);
    let message = '    ！     ';
    //    
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 *   post  
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.post(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '    ！     ';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 *   patch  
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.patch(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '    ！     ';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

/**
 *   put  
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.put(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '    ！     ';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

export function del(url,data = {}){
 return new Promise((resolve,reject) => {
  axios.delete(url,data)
   .then(response => {
    if(response.data.code === 200){
     resolve(response.data.data);
    }else{
     Toast(response.data.msg)
    }
   },err => {
    reject(err);
    let message = '    ！     ';
    if(err.response)message=err.response.data.message;
    Toast(message)
   })
 })
}

주요 파일 을 편집 하고 service 에 api.js 파일 을 새로 만 들 고 해당 구성 요소 방법 을 도입 합 니 다.

import Vue from 'vue';
import {post,fetch,patch,put,del,upload,ret2} from './index'
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;
Vue.prototype.$del=del;

이어서 각 API 방법 을 쓰기 시작 할 수 있 습 니 다.

//      
const _baseUrl=process.env.API_URL;//                   
//    
const loginURL = `${_baseUrl}api/admin/login`;
export const loginApi = function(json) {
 return Vue.prototype.$post(loginURL,{"username":json.username,"passwd":json.password})
};
//      RESTful
const editAdminUrl = `${_baseUrl}api/admin/user/info`;
export const editAdminListApi = function (id,json) {
 return Vue.prototype.$put(`${editAdminUrl}/${id}`,json)
};
//  ...

마지막 으로 사용 합 니 다.아주 간단 하고 편리 합 니 다.vue 파일 에 도입 하고 사용 합 니 다.

import { loginApi ,editAdminListApi } from "../../service/api";
  export default {
    methods：{
      //  
      login(){
        let json = {
          userName:'xx',
          password:'xx'
        }
        loginApi().then(res=>{
          console.log(res)
        })
      },
      // RESTful     
      editAdminList(){
        let id = 1;
        let json = {name:11};
        editAdminListApi(id,json).then(res=>{
          console.log(res)
        })
      }
    }
  }

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