API层的封装

最后的实现效果就是在组件中直接调用方法来达到请求对应接口的目的。如下图

第一步:新建server.js 封装axios

import axios from 'axios'

//获取token
function getTokenByLocal(){
    let token = sessionStorage.getItem('token') || '';
    return token;
}

//创建实例
const serive = axios.create({
    baseURL:'http://localhost:8080/',
    timeout:5000
})

//request请求拦截器  //formdata
serive.interceptors.request.use(
    config =>{
        if(getTokenByLocal()){
            config.headers['token'] = getTokenByLocal();
            config.headers['ContentType'] = "application/json;charset=utf-8";
        }
        return config
    },
    error =>{
        Promise.reject(error)
    }
)

//response 响应拦截器
serive.interceptors.response.use(
    response =>{
        let res = response.data;
        if(res.code == '401'){
            console.log('请求成功');
        }
        return Promise.resolve(response.data)
    },
    error =>{
        return Promise.reject(error);
    }
)
export default serive

新建项目模块文件存放所有此模块的接口

vue项目接口文件一般放在api目录下,这里我在api目录新建login.js和shop.js来存放模块接口。

login.js

export default {
  loginIn:'/api/loginIn',
  loginOut:"/api/loginOut",
  getMes:'/api/messget'
}

shop.js

export default {
  shopList:"/api/shopList"
}

最重要的一步，注册接口逻辑

import server from "./server.js";
import qs from 'qs';
function myserver(){
   this.server=server;
   this.nowhandle=null;
}
myserver.prototype.parseRouter=function(name,urlOb){
   var ob=this[name]={};
   // 循环注册所有接口
   Object.keys(urlOb).forEach((item)=>{
      ob[item]=this.sendMes.bind(this,name,item,urlOb[item]);
      // 设置接口，防止多次请求
      this[name][item].state='ready';
   })
}

// 存储调用接口的对象,接口自动绑定
myserver.prototype.v=function(ob){
  this.nowhandle=ob;
  return this;
}
myserver.prototype.sendMes=function(modulename,name,url,config){
   var bindName=config.bindName||'';
   var type=config.type||'get';
   var data=config.data||{};
   var self=this;
   var defaultFn=function(mes){
   	bindName&&self.nowhandle[bindName]=mes;
   };
   var success=config.success||defaultFn;
   var callback=function(res){
   	   self[modulename][name].state='ready'
       success(res,defaultFn);
   }
   var state={
   	get:function(){
     var urlqs=url+"?"+qs.stringify(data);
     server.get(urlqs).then(callback);
   	},
   	post:function(){
     server.get(url,data).then(callback);   		
   	}
   };
   if(self[modulename][name].state=='ready'){
   	 self[modulename][name].state='pending';
   	 state[type]();
   }
   
}
 
export default new myserver;

在api文件夹下建立index.js,注册所有模块的接口

import myserver from "../request/getrequest.js"
import login from './login.js'
import shop from './shop.js'
myserver.parseRouter('login',login);
myserver.parseRouter('shop',shop);
export default myserver;