接口的统一管理优点:
1.更加模块化
2.更方便多人开发,有效减少解决命名冲突
3.处理接口域名有多个情况
——————————————————————————————————————————————
新建文件夹api,里面写一个article.js.表示这个js里面的接口全是关于文章这块的。
引入写好的axios.js文件(已经写了请求的拦截,响应拦截以及错误处理这些)。
import axios from '../axios'
然后就可以写关于文章这块的所有接口,例如:
const getArticleList = p => axios.get('/article-list', { params: p }) // 获取文章列表
const modifyArticle= (id, p) => axios.put(`/article-modify/${id}`, p) // 修改文章
const writeArticle= (p) => axios.post(`/article-write/${id}`, p) // 写文章
const deleteArticle= (id) => axios.post(`/article-delete/${id}`) // 删除文章
写完接口,然后在导出:
export default {
getArticleList,
modifyArticle,
writeArticle,
deleteArticle
}
这样,文章这块的接口管理接完成了。在index.js(index.js是一个api接口的出口,这样就可以把api接口根据功能划分为多个模块,利于多人协作开发,比如一个人只负责一个模块的开发等,还能方便每个模块中接口的命名)引入:
import article from './article'
...
export default {
article,
...
}
最后在main.js引入index.js,vue实例原型上面挂载就行了
import api from './api/api'
Vue.prototype.$api = api
页面中调用:
let { data } = this.$api.article.getArticleList(params)