Vue请求接口封装

vue接口封装

• 封装请求方法

import axios from 'axios'
import { Message } from 'iview'

//axios请求拦截
service.interceptors.response.use(response => {
	//统一处理返回信息
    const res = response.data
    //根据自己接口格式处理
    if (res.code === 0)
        return Promise.resolve(res)
    else
    	//错误提示 --- iview
        Message.warning(res.message)
        return Promise.reject(res)
},
error => {
	//error.response.data.message == 'Access Denied'  登录过期
    if(error.response.status === 403 && error.response.data.message == 'Access Denied' 
    	&& $cookies.get("loginError") !== "error"){
    	// 设置10秒内不重复提醒登录过期
        $cookies.set("loginError", "error", 10);
        Message.warning("登录超时，请重新登录");
        router.push('/login');
    } else if(error.response.data.message != 'Access Denied'){
   		// error.response.data.message == 'Forbidden' 无权限
        Message.error(error.response.data.message == 'Forbidden' ?
         '您无权限访问/操作此页面下的数据，请联系管理员配置访问权限！' : error.response.data.message)
    }
    return Promise.reject(error);
})

//请求方法封装，拷贝直接用~
export default {
    Get(url, data = {}) {
        return service({
            url: url,
            method: 'get',
            params: data,
        })
    },

    Post(url, data = {}) {
        return service({
            url: url,
            method: 'post',
            data: data,
        })
    },

    Put(url, data = {}) {
        return service({
            url: url,
            method: 'put',
            data: data,
        })
    },

    Delete(url, data = {}) {
        return service({
            url: url,
            method: 'delete',
            data: data,
        })
    }
}

• 接口方法管理

import service from './service'
export default {
    /**
     * 获取用户信息
     * @param data
     */
    getUserInfo: (data) => {
        return service.Get('/userinfo', data);
    }
 }

• main.js引入–>全局使用

//引入
import api from './api/api';

放在Vue对象prototype下
Vue.prototype.$api = api;

• 组件中使用

//data：需要的参数
this.$api.getUserInfo(data)
  .then((res) => {
  	//res接口返回得数据
    //成功
  })
  .catch((err) => {
  	//err错误消息
	//失败
  })