【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)
　　}
}