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";
// 创建axios实例
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)=>{
      if (config.method == "get") {
      config.params = { ...config.data };
    } else if (config.method == "post") {
      //   config.headers["content-type"] = "appliaction/x-www-form-urlencoded";
      //   config.data = qs.stringfy(config.data);
    }
    // config.headers["authToken"] = store.token;
    return config;
},(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)
　　}
}