axios使用笔记

1.需求分析

联系人列表

新建  编辑 获取 删除

2.环境配置

vue-cli搭建项目工程目录

vant 组件库(vue,移动端,推荐使用vue-cli3,babel.config.js)

3.静态页面

ContactList.vue

vant Button(import引入,components注册[Button.name],按需引入)

router.js path name component:()=>importy('./views/ComtactList.vue')

3.调试接口

url methods 参数(path,body) 备注

data return(注释值的类型) methods(注释方法的作用)

van-contact-list :list="list" :contact-info="editingContact" isEdit=false showEdit=false

@add="onAdd"  @save="onSave" @delete="onDelete"

@edit="onEdit(info)"

4.功能点

this.instance = created axios.create({baseURL:"",timeout})

this.instance.get('/contactList').then(res=>{this.list = res.data.data}).catch(err=>{Toast('请求失败，清稍后重试')})

5.封装axios

封装url

service.js

export default const CONTACT_API = {

　　getContactList:{

　　　　method:'post',

　　　　url:'/contact/new/form'

　　}

}

http.js