美文网首页
axios封装

axios封装

作者: hibigger | 来源:发表于2019-03-10 09:45 被阅读0次

http.js

// 在http.js中引入axios

import axios from 'axios'; // 引入axios

import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据

// 先导入vuex,因为我们要使用到里面的状态对象

// vuex的路径根据自己的路径去写

import store from '@/store/store';

// 环境的切换

if (process.env.NODE_ENV == 'development') {   

    axios.defaults.baseURL = 'http://192.168.1.102:8080/cxf/';}

else if (process.env.NODE_ENV == 'debug') {   

    axios.defaults.baseURL = 'http://192.168.1.102:8080/cxf/';

}

else if (process.env.NODE_ENV == 'production') {   

    axios.defaults.baseURL = 'http://192.168.1.102:8080/cxf/';

}

axios.defaults.timeout = 10000;

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器

axios.interceptors.request.use(   

    config => {       

        // 每次发送请求之前判断vuex中是否存在token       

        // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况

        // 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断

        const token = store.state.token;       

        token && (config.headers.Authorization = token);       

        return config;   

    },   

    error => {       

        return Promise.error(error);   

})

/**

* get方法,对应get请求

* @param {String} url [请求的url地址]

* @param {Object} params [请求时携带的参数]

*/

export function get(url, params){   

    return new Promise((resolve, reject) =>{     

        axios.get(url, {           

            params: params       

        }).then(res => {

            resolve(res.data);

        }).catch(err =>{

            reject(err.data)       

    })   

});}

/**

* post方法,对应post请求

* @param {String} url [请求的url地址]

* @param {Object} params [请求时携带的参数]

*/

export function post(url, params) {

    return new Promise((resolve, reject) => {

        axios.post(url, QS.stringify(params))

        .then(res => {

            resolve(res.data);

        })

        .catch(err =>{

            reject(err.data)

        })

    });

}

api.js

/** 

* api接口统一管理

*/

import { get, post } from './http'

export const apiAddress = p => post('/weChat/activity/hotMeeting', p);

使用

apiAddress({

             

            }).then(res => {

                // 获取数据成功后的其他操作

                this.bannerList = res.data

                console.log(this.bannerList)

            })

相关文章

网友评论

      本文标题:axios封装

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