特点：支持promise API 、 拦截请求和响应、转换请求数据和响应数据、取消请求、自动转换JSON数据、客户端支持防御XSRF等；
axios请求方法（需后端定义）：get获取数据、 post提交数据（用于表单提交和文件上传）、 patch更新（只将修改的数据推送到后端）、 put更新（所有数据都推送到后端）、 delete删除数据
例如：axios_test.vue:
<script> export default{ name:‘axios_test‘, components:{}, created(){ //get axios.get(‘/data.json‘,{params:{id:12,name:‘zs‘}}).then((res)=>{ console.log(res); }) 或：axios({ method:‘get‘, url:‘/data.json‘, params:{ id:12, name:‘zs‘ } }).then((res)=>{ console.log(res); }) //post axios.post(‘/xxx‘).then({ // 默认application/json常用，用于没有上传文件时，用法同上不详写了 // form-data 表单提交（用于文件上传） let data = { id:12} let formData = new FormData() for(let key in data){ formData.append(key,data[key]); } axios.post(‘post‘,formData).then(res=>{ console.log(res) }) }) //put/patch axios.put(‘/put‘,data).then(res=>{ console.log(res); }) //delete axios.delete(‘/delete‘,{ params:{id:12}}).then(res=>{}) //实则底层调用get请求,params数据将添加到url中去； axios.delete(‘/delete‘,{ data:{id:12}}).then(res=>{}) //实则底层调用post请求，data数据将放在请求体中； //并发请求：同时进行多个请求，并统一处理返回值。 axios.all()和axios.spread() axios.all([ axios.get(‘/data.json‘), axios.get(‘/city.json‘) ]).then( axios.spread((dataRes,cityRes)=>{ console.log(dataRes,cityRes); }) ) //创建axios实例 let instance = axios.create({ //设置后会覆盖以前的设置 baseURL:‘http://localhost:8080‘, timeout:1000, url:‘/data.json‘, method：‘get/post/put/patch/delete‘, headers：{token:‘‘}, //设置请求头 params:{}, //请求参数拼接到url上 data:{} //请求参数放到请求体中 }) let instance2 = axios.create() instance.get(‘/data.json‘).then(res=>{}) //1、axios全局配置 axios.defaults.timeout = 1000; axios.defaults.baseURL = ‘http://localhost:8080‘ //2、axios实例配置（常用方式） let instance = axios.create() //单独创建防止全局污染 instance.defaults.timeout=3000 //单独设置防止覆盖其他设置 //3、axios请求配置 (三种方式中优先级最高) instance.get(‘/data.json‘,{ time:5000 }) //拦截器：在请求或响应被处理前拦截它们，分为请求拦截器和响应拦截器 //请求拦截器 axios.interceptors.request.use(config=>{ //在发送请求前做些什么 return config },err=>{ //在请求发生错误时怎么处理 return Promise.reject(err) }) //响应拦截器 axios.interceptors.response.use(config=>{ //请求成功对响应数据做处理 return res },err=>{ //在响应发生错误时怎么处理 return Promise.reject(err) }) //取消拦截器（了解） let interceptor = axios.interceptors.request.use(config=>{ config.headers={ auto:true} return config }) axios.interceptors.request.eject(interceptor); //拦截器例子1:比如微博评论时需要先登录 let instance = axios.create({}) instance.interceptors.request.use(config=>{ config.headers.token = ‘‘; return config }) //拦截器例子2：移动端开发时的请求等待 let instance_phone = axios.create({}) instance_phone.interceptors.request.use(config=>{ $(‘#modal‘).show() // 请求等待弹窗 return config }) instance_phone.interceptors.response.use(res=>{ $(‘#modal‘).hide() // 请求等待弹窗隐藏 return res }) //错误处理 实际开发中，一般添加统一错误处理，特殊的单独添加。 //添加请求错误处理拦截器 let instance = axios.create({}) instance.interceptors.request(config=>{ return config },err=>{ //请求错误 一般http状态码以4开头，常见：401超时，404 没找到 $(‘#modal‘).show() setTimeout(()=>{ $(‘#modal‘).hide() },2000) return Promise.reject(err) }) //添加响应错误处理拦截器 instance.interceptors.response(res=>{ return res },err=>{ //响应错误 一般http状态码以5开头，常见：500系统错误，502系统重启 $(‘#modal‘).show() setTimeout(()=>{ $(‘#modal‘).hide() },2000) return Promise.reject(err) }) //添加特殊错误处理 instance.get(‘/data.json‘).then(res=>{ console.log(res) }).catch(err=>{ console.log(err) }) //取消请求（了解） let source = axios.CancelToken.source() axios.get(‘data.json‘,{cancelToken:source.token}).then() source.cancel(‘cancel http‘) //取消请求（message可选） 比如当用户查询数据耗时太久，用户不再查询进行了其他操作时可能用到，一般用不到。 } } </script>
axios实战：移动端UI的vant使用和axios的封装：
①npm i vant
②npm i ts-import-plugin -D
③按照 API文档的快速上手提示，在 babel.config.js 中配置
module.exports = { plugins: [ [‘import‘, { libraryName: ‘vant‘, libraryDirectory: ‘es‘, style: true }, ‘vant‘] ] };
④ 引入 Vant 组件
test.vue:
<template> <van-button type="default">默认按钮</van-button> </template> <script> import axios from ‘axios‘ import {Button} from ‘vant‘ export default { name:‘showlist‘, components:{ [Button.name]=Button //局部注册，template模板中没有引用时可不写，vant官方格式。 }, created(){ axios.get(./data.json).then((res)=>{ console.log(res) }) } } </script>
⑤ router.js中添加一条路由：{path:‘/showlist‘,name:‘‘,component:()=>import(‘./views/showlist.vue‘)}
⑥ npm run serve 启动服务测试
axios的封装 示例
①contactApi.js: const CONTACT_API = { //获取联系人列表 getContactList:{ method:‘get‘, url:‘/contactList‘ }, //新建联系人 form-data newContactForm:{ method:‘post‘, url:‘/contact/new/form-data‘ }, //新建联系人 application/json newContactJson:{ method:‘post‘, url:‘/contact/new/json‘ }, //编辑联系人 editContact:{ method:‘put‘, url:‘/contact/edit‘ }, //删除联系人 delContact:{ method:‘delete‘, url:‘/contact‘ }, } export default CONTACT_API ②http.js: import axios from ‘axios‘ import service from ‘./contactApi.js‘ import {Toast} from ‘vant‘ //service循环遍历，输出不同的请求方法 let instance = axios.create({ baseURL:‘http://localhost:9000/api‘, timeout:1000 }) const Http = {}; //存放请求方法的容器 for(let key in service){ let api = service[key]; //url、method Http[key] = async function( params, //请求参数 isFormData = false, //标识是否是form-data请求 config={} //配置参数 ){ let newParams = {} if(params && isFormData){ newParams = new FormData() for(let i in params){ newParams.append(i,params([i])) } }else{ newParams = params } //不同请求的判断 let response = {}; //请求的返回值 if(api.method ===‘put‘|| api.method ===‘post‘||api.method===‘patch‘){ try{ response = await instance[api.method](api.url,newParams,config) }catch(err){ response = err } }else if(api.method ===‘delete‘||api.method===‘get‘){ config.params = newParams try{ response = await instance [api.method](api.url,config) }catch(err){ response = err } } return response; } } //拦截器的添加 instance.interceptors.request.use(config=>{ Toast.loading({ mask:false, //是否有阴影 duration:0, //一直存在 forbidClick:true, //禁止点击 message:‘加载中...‘ }) return config },err=>{ Toast.clear() Toast(‘请求错误，请稍后重试‘) }) //响应拦截器 instance.interceptors.response.use(res=>{ Toast.clear() return res.data },()=>{ Toast.clear() Toast(‘请求错误，请稍后重试‘) }) export default Http ③main.js文件中引入http.js,并将其挂载到vue实例上，引入后添加如下： Vue.prototype.$http = Http; ④vue组件中使用: <script> import axios from ‘axios‘ import {Button} from ‘vant‘ export default { name:‘showlist‘, components:{ [Button.name]=Button //局部注册，template模板中没有引用时可不写。 }, methods:{ //获取联系人列表 async getList(){ let res = await this.$http.getContact() this.list = res.data } } } </script>