vue 封装

第一步 先安装

npm install --save axios

第二部 在main.js引入

import { apiGet, apiPost } from "./api/api";
Vue.prototype.$apiGet = apiGet;
Vue.prototype.$apiPost = apiPost;

import axios from "axios";
Vue.prototype.$axios = axios;

第三步 创建aip 文件夹

我这里为了防止不乱 我有在api文件夹 文件里面创建一个aip文件

import axios from 'axios'
axios.defaults.timeout = 30000
axios.defaults.baseURL = "" //这里可以写接口的前缀
// axios.defaults.baseURL = process.env.VUE_APP_API_URL

// if(process.env.VUE_APP_MODE==='development'){
// 	console.log('开发');
// }else if(process.env.VUE_APP_MODE==='test'){
// 	console.log('测试');
// }else{
// 	console.log('正式');
// }
axios.interceptors.request.use((config) => {
    return config
}, (error) => {
    return Promise.reject(error)
})
axios.interceptors.response.use((response) => {
    if (response.status == 200) {
        return response
    }
}, (error) => {
    return Promise.reject(error)
})
export function apiGet(url) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url
        }).then(value => {
            resolve(value.data)
        }, reason => {
            reject(reason)
        })
    })
}
export function apiPost(url, data) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url,
            data
        }).then(value => {
            resolve(value.data)
        }, reason => {
            reject(reason)
        })
    })
}

让后在aip 文件夹里面创建一个http.js

这里面就是封装的接口了

import { apiGet, apiPost } from "./api"; //先引入api 


//    接口是什么就写什么
export function getCode() {
    return get('') // 这个不是参数的

}

export function postLogin(data) {
    return post('', data)  //这是带参数的
}


//post方法
function post(url, data) {
    return new Promise((resolve, reject) => {
        apiPost(url, data).then(value => {
            if (value.code == 0) {
                resolve(value)
            } else {
                reject(value)
            }
        }, reason => {
            reject(reason)
        })
    })
}
//get方法
function get(url) {
    return new Promise((resolve, reject) => {
        apiGet(url).then(value => {
            if (value.code == 0) {
                resolve(value)
            } else {
                reject(value)
            }
        }, reason => {
            reject(reason)
        })
    })
}

第四步就是使用了

在你页面 先引入

// http.js文件这个 export function 后面起什么名字这个 {} 就引入什么名字然后下边在调用一下就成功了

import { } from '../../api/http'