VUE 는 Axios 와 패 키 징 을 사용 합 니 다 (간결 하고 뚜렷 합 니 다)

14939 단어 전단
Axios 설치
yarn add axios

npm install axios -S

src 에서 request / http. js 만 들 기
import axios from 'axios';
import {Toast} from 'vant';

//     
const instance = axios.create({
    baseURL: "http://localhost:8080",
    timeout: 10000,
});

//     
instance.interceptors.request.use(
    config => {
    	//            
        return config;
    }, err => {
    	//       
        return err;
    }
);

//     
instance.interceptors.response.use(
    res => {
        //            
        return res;
    }, err => {
   		//       
        return err;
    }
);

// get   
export const get = (url, params) => {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: params
        })
        .then(res => resolve(res))
        .catch(err => reject(err))
    })
}

// post   
export const post = (url, data) => {
    return new Promise((resolve, reject) => {
        instance.post(url, data)
        .then(res => resolve(res))
        .catch(err => reject(err))
    })
}

// put   
export const put = (url, data) => {
    return new Promise((resolve, reject) => {
        instance.put(url, data)
        .then(res => resolve(res))
        .catch(err => reject(err))
    })
}

// delete   
export const del = (url, params) => {
    return new Promise((resolve, reject) => {
        instance.delete(url, {
            params: params
        })
        .then(res => resolve(res))
        .catch(err => reject(err))
    })
}


src 에서 request / api. js 만 들 기
import {get, post, put, del} from "./http";

// get
export const get= params => get("/api/get", params);

// post
export const post = data => post("/api/post", data);

// put
export const put= data => put("/api/put", data);

// del
export const del= params=> del("/api/del", params);


main. js 마 운 트 전역 도입
import *as api from './request/api';

Vue.prototype.$api = api;

index. vue 구성 요소 호출
created() {
	// get   
	this.$api.get().then(res => console.log(res))
}

좋은 웹페이지 즐겨찾기