어떻게 vue 로 axios 요청 을 봉인 합 니까?

사실 vue 패키지 axios 는 간단 해 요.
먼저 src 경로 에서 http 폴 더 를 만 들 고 api.js env.js request.js 세 파일 을 만 듭 니 다.

env.js 파일
이 파일 은 주로 우리 의 공공 주 소 를 봉인 하 는 것 이다.

export default {
//     
dev: {
    baseUrl: "        "
},
//       test
test: {
    baseUrl: "        "
},
//    
prod: {
    baseUrl: "        "
}
};

request.js 파일
여 기 는 주로 axios 를 만 들 고 패 키 징 요청 차단 과 해당 하 는 차단 입 니 다.

import axios from "axios";
import env from "./env";
//                
var vipUrl = "/app";
//   axios  

const service = axios.create({
//         
baseUrl: env.prod.baseUrl + vipUrl,
    headers:{},//   
    settimeout:2000,//    
});
//        
service.interceptors.request.use(
config => {
    //            
    config.headers["deviceType"] = "H5";
    console.log("     :", config);
    return config;
},
error => {
    //          
    return Promise.reject("  ", error);
}
);

//        
service.interceptors.response.use(
response => {
    //          
    // console.log("     ", response);
    return response;
},
error => {
    //          
    return Promise.reject(error);
}
);
export default service;

api.js
이 파일 에는 주로 필요 한 인터페이스 주소 가 있 습 니 다.

//  request.js  
import request from "./request";

//   
export function getBanners(data) {
return request({
    url: "/banner",//                       
    method: "GET",//             get post put delete   
    data//                       
});
}

마지막 으로 페이지 에서 의 인용 입 니 다.
그 페이지 는 데 이 터 를 요청 하려 면 해당 하 는 방법 을 도입 해 야 합 니 다.예 를 들 어 제 홈 페이지 는 banner 를 도입 해 야 합 니 다.

<script>
//       
import { getBanners } from "../http/api";
export default {
name: "Home",
components: {},
mounted() {
    //     .then          .catch        
    getBanners()
    .then(result => {
        window.console.log("111", result);
    })
    .catch(err => {
        window.console.log("222", err);
    });
},
methods: {}
};
</script>

이상 은 어떻게 vue 로 axios 요청 을 봉인 하 는 지 에 대한 상세 한 내용 입 니 다.vue 로 axios 요청 을 봉인 하 는 데 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!