一、前言
在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)
}
}