【vue】---项目接口管理---【巷子】

一、前言

　　在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口

 

　　假设后端的文档分成了以下几个模块

　　1、发现模块

　　2、个人信息模块

　　3、商品模块

　　4、评论模块

　　......

　　一般来说，网站的首页都是复杂的，会用到很多其他页面也会用到api，所以接口统一管理可以做到api的复用

 

二、接口管理

　　1、在src目录下创建api文件夹

 

　　2、按照后台文档划分模块

 

　　　　find.js

 

　　　　info.js

 

　　　　goods.js

 

　　　　comment.js

 

　　3、创建http.js 引入axios 配置axios

import axios from "axios"; import qs from "qs"; var http = axios.create({ // baseURL:"XXXX",
    timeout:5000 }) //请求拦截
http.interceptors.request.use((config)=>{ // if(config.method == "post"){
    // config.data = qs.stringify(config.data);
    // }
    return config; },(err)=>{ return Promise.reject(err) }) //响应拦截
http.interceptors.response.use((res)=>{ return res.data },(err)=>{ return Promise.reject(err) }) export default (method,url,data = null)=>{ if(method == "post"){ return http.post(url,data); }else if(method == "get"){ return http.get(url,{params:data}) }else{ return; } }

 

 

 

 

　　4、在api文件夹下引入http.js.简单用info.js为例

　　

import http from "./http.js"; //在这里定义了一个登陆的接口，把登陆的接口暴露出去给组件使用
export const login = params=>http("post","/user/login",params); export const register = params=>http("get","/user/register",params);

 

　　5、在组件中使用

 

 
  
    import {homeData} from "../../apis/home"; 
   
  
 
  
    export default { 
   
  
    　　async handleData(){ 
   
  
    　　　　let data = await homeData() 
   
  
    　　　　console.log(data) 
   
  
    　　} 
   
  
    }