vue axios 封装.

第一步 先安装

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 文件夹

import axios from 'axios';

axios.defaults.timeout = 30000;
//获取当前环境配置项中的地址，会自动追加到接口上
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.response.use(function (response) {
    if (response.status == 200) {
        return response;
    }else{
        alert("信息错误")
    }
    
}, function (err) {

    return Promise.reject(err);
});

export function apiGet(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            headers: { "token": sessionStorage.getItem('token') }
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    });
}
export function apiPost(url, params) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: params
        }).then(res => {
            resolve(res.data);
        }).catch(err => { reject(err.data) })
    });
}

第四步在 aip 文件夹里面创建一个http.js

import { apiGet, apiPost } from "./api";
//右侧数量
export function quantity() {
    return get("http://47.94.4.201/index.php/index/admin/getNolist")
}
//进度条
export function progress() {
    return get("http://47.94.4.201/index.php/index/admin/getNum")
}
//待办事项
export function backlog() {
    return get("http://47.94.4.201/index.php/index/admin/getTolist")
}
//echarts
export function Column() {
    return post("http://47.94.4.201/index.php/index/index/getDatas")
}
//登录接口
export function Login(data) {
    return post("http://47.94.4.201/index.php/index/index/login", data)
}
//验证码
export function Code() {
    return post("http://47.94.4.201/index.php/index/index/getcode")
}
//注册
export function Register(register) {
    return post('http://47.94.4.201/index.php/index/index/register ',register)
}

//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)
        })
    })
}

第五步使用引用

import { Login, Code, Register } from "../api/http"