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