美文网首页
vue2配置axios

vue2配置axios

作者: 荒天帝886 | 来源:发表于2019-05-14 17:57 被阅读0次

axios配置源码
解决兼容问题1
解决兼容问题2

  1. npm install axios -s
  2. main.js中进行以下配置
import axios from 'axios'

Vue.use(axios);
Vue.prototype.$axios = axios;

getData.js

import {get, post} from "./axios";

let baseUrl = 'http://localhost:10080';

let urlFactory = {
    getUser: () => (baseUrl + '/area/user'),
    createUser: () => (baseUrl + '/area/'),
};

export const getUser = (data) => get(urlFactory.getUser() + data);

export const createUser = (data) => post(urlFactory.createUser(), data);

axios.js

import axios from 'axios'

export const get = function (url) {
    return new Promise((resolve, reject) => {
        axios({
            url: url,
            method: 'GET'
        }).then(res => {
            resolve(res.data);
        }).catch(error => {
            reject(error)
        })
    })
};

export const post = function (url, data) {
    return new Promise((resolve, reject) => {
        axios({
            url: url,
            method: 'POST',
            data: data
        }).then(res => {
            resolve(res.data);
        }).catch(error => {
            reject(error)
        })
    })
};

其它写法

import axios from 'axios';
//配置拦截器
axios.interceptors.request.use(
    config => {
        config.headers.web_token = getStore('web_token');
        return config
    },
    error => {
        return Promise.reject(error);
    }
);

//配置拦截器
axios.interceptors.response.use(
    response => {
        if (response.data.code === -2) {
            router.push({
                path: "/",
                //query: {redirect: router.currentRoute.fullPath}//从哪个页面跳转
            })
        }
        return response;
    },
    error => {
        return Promise.reject(error)
    }
);

export const post = (url, data) => {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(response => {
            if (response.data.code === -2) {
                Message.error(response.data.message);
                //alert(response.data.message);
            }
            resolve(response.data);
        }, err => {
            reject(err)
        })
    })
};

export const put = (url, data) => {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(response => {
            resolve(response.data);
        }, err => {
            reject(err)
        })
    })
};

export function get(url) {
    return new Promise((resolve, reject) => {
        axios.get(url).then(response => {
            if (response.data.code === -2) {
                Message.error(response.data.message);
                //alert(response.data.message);
            }
            resolve(response.data);
        }, err => {
            reject(err)
        })
    })
}

export function del(url) {
    return new Promise((resolve, reject) => {
        axios.delete(url).then(response => {
            resolve(response.data);
        }, err => {
            reject(err)
        })
    })
}

相关文章

网友评论

      本文标题:vue2配置axios

      本文链接:https://www.haomeiwen.com/subject/onyeaqtx.html