#### 前言：[axios 的基本使用方法](https://www.kancloud.cn/yunye/axios/234845)不赘述。请自行查看文档。 ## 背景 业务需求：前面的文章已经封装axios，若是直接使用会使页面臃肿。 而本文就是让页面更加干净清楚。 # :-: **正文** > 直接使用axios封装的方法会让页面臃肿，可以想象，若多个下方代码在同一个页面会让页面感觉混乱 ``` this.$post('http://rap2api.taobao.org/app/mock/9304/w1').then((data)=>{ console.log(data) }) ``` > 而在此封装请求会让页面更加干净，直接项目目录图  > 我们先看api.js，文件名称已经告诉我们了，他是提供api的，他是封装请求的js，http.js是第一次封装，而api.js是二次。 ``` /*api.js*/ import {post} from '@/assets/js/http' /** * @author 姓名 * @date 时间 * @Description: 用途（如获取用户信息） */ export function userList() { return post('/bee/api/user/userDetail') } ``` > 我们在看usercenter.vue页面 ``` /*usercenter.vue*/ <template> <div>信息</div> </template> <script> import { userList } from '@/assets/js/api'//这里引入我们刚刚封装的api.js方法 export default { name: "g-usercenter", data(){ return { user:'' } }, created(){ //userMsg();//用户信息 userList().then(data=>{ console.log(data) }) }, methods:{ } }; </script> ``` # :-: **功能加强** > 在某些情况下我们需要使用到同步，下方代码可以实现 ``` created(){ //userMsg();//用户信息 const parallel = async () => { await setTimeout(()=>{userList().then((data)=>{ alert(1241) })},3000) await userList() } parallel() } ``` ﾍ(;´Д｀ﾍ) (/ﾟДﾟ)/ (\*゜ロ゜)ノ Σ( ￣д￣；) (っ °Д °;)っ ( •̀д•́) Σ( ° △ °|||) ***** 结束感言：上述教程（1）（2）（3），虽然封装了很多，但是要是在项目中使用会使项目干净，体验提升，而清楚的注释也可以让代码一目了然。希望对大家有帮助。 ### :-: **其他** [axios封装全局loading（1）](https://www.kancloud.cn/ctwee/ctwee/908764) [axios封装全局loading（2）](https://www.kancloud.cn/ctwee/ctwee/894036) [axios封装全局loading（3）](https://www.kancloud.cn/ctwee/ctwee/908766)