用到的模块：
Vue: https://cn.vuejs.org/v2/guide/
Axios: http://www.axios-js.com/zh-cn/docs/
vant: https://youzan.github.io/vant/#/zh-CN/intro
可参考文章
1、接口配置
server/contactApi.js
// 统一接口管理 const CONTACT_API = { // 获取联系人列表 getContactList: { method: "get", url: "/contactList.json" } } export default CONTACT_API
2、配置全局的Http请求函数
server/http.js
import axios from "axios"; import contactApi from "./contactApi" import {Toast} from "vant" let instance = axios.create({ baseURL: "/", timeout: 1000 // 毫秒 }) // 包装请求方法的容器 const Http = {} for(let key in contactApi){ let api = contactApi[key] // async 作用，避免进入回调地狱 Http[key] = async function(data){ let response = {}; try{ response = await instance[api.method](api.url, {params: data}) }catch(err){ response = err; } return response; } } // 请求拦截器 instance.interceptors.request.use( config => { Toast.loading({ mask: false, duration: 0, // 一直存在 forbidClick: true, // 禁止点击 message: "加载中..." }) return config; },()=>{ Toast.clear() Toast("请求出错") } ) // 添加响应拦截器 instance.interceptors.response.use( res => { Toast.clear() return res.data; },()=>{ Toast.clear() Toast("请求出错") } ) export default Http
3、全局挂载
main.js
// 把Http挂在到vue实例上，全局可用 Vue.prototype.$Http = Http
4、视图中调用http
views/VantIndex.vue
<template> <div> <!-- 联系人列表 --> <van-contact-list :list="list" /> </div> </template> <script> // 引入组件 import { ContactList } from "vant"; export default { name: "vantIndex", data() { return { list: [] }; }, // 注册组件 components: { [ContactList.name]: ContactList }, methods: { async getContactList() { let res = await this.$Http.getContactList({ name: "Tom" }); this.list = res.data; } }, // mounted creared creared() { this.getContactList(); } }; </script>
5、修改路由
router.js
routes: [ { path: '/', name: 'index', component: () => import('./views/VantIndex.vue') } ]
6、测试数据 public/contactList.json
{ "code": 200, "data": [ { "name": "张三", "tel": "13000000000", "id": 1 }, { "name": "李四", "tel": "13000000001", "id": 2 }, { "name": "王五", "tel": "13000000002", "id": 3 } ] }
启动服务访问测试
npm run serve
