基本使用

  1. npm install axios --save
  4. import axios from 'axios'
  5. Vue.config.productionTip = false
  7. new Vue({
  8.   render: h => h(App),
  9. }).$mount('#app')
  11. axios({
  12.   //123.207.32.32:8000/home/multidata
  13.   url:'http://123.207.32.32:8000/home/multidata',
  14.   method:'get',
  15.   params:{}//get传参
  16.   data:{}//post传参
  17. }).then(res=>{
  18.   console.log(res);
  19. });
  20. axios.get("url",{参数}).then();
  21. axios.post("url",data:{参数}).then();

发送并发请求

  1. 使用axios.all, 可以放入多个请求的数组.
  2. axios.all([]) 返回的结果是一个数组，使用 axios.spread() 可将数组 [res1,res2] 展开为 res1, res2
  4. axios.all([
  5.   axios.get('http://123.207.32.32:8000/home/multidata'),
  6.   axios.get('http://123.207.32.32:8000/home/multidata')
  7. ]).then(result=>{
  8.   //result返回的是一个数组结果存在了数组里面
  9.   console.log(result);
  10. });
  12. axios.all([
  13.   axios.get('http://123.207.32.32:8000/home/multidata'),
  14.   axios.get('http://123.207.32.32:8000/home/multidata')
  15. ]).then(axios.spread((参数1，参数2...)=>{}));//有多个请求设置多少个参数会把返回的数组自动展开

全局配置

  1. axios.defaults.属性名  可设置对应属性的默认值 在后面的axios中就可以了省略
  3. axios.defaults.baseURL='http://123.207.32.32:8000'
  4. axios({
  5.   url:'/home/multidata',
  6.   method:'get'
  7. }).then(res=>{
  8.   console.log(res);
  9. });
  1. 属性配置
  3. 请求地址
  4. url: '/user',
  5. 请求类型
  6. method:  'get', -->'post'  'put' 'delete'
  7. 请根路径
  8. baseURL: 'http://www.mt.com/api',
  9. 自定义的请求头
  10. headers:{'x-Requested-With':'XMLHttpRequest'},
  11. URL get传参
  12. params:{ id: 12 },
  13. post 传参
  14. data: { key: 'aa'},
  15. auth：{} oauth2设置安全信息
  16. 超时设置s
  17. timeout: 1000,
  18. 响应的数据格式 "" 默认类型 DOMString，与设置为 text 相同
  19.                             json  是一个json格式的字符串
  20.                             blob  是一个包含二进制数据的 Blob 对象 
  21.               document 是一个 HTML Document 
  22.               arraybuffer 是一个包含二进制数据的流
  23.               text 文本
  24. responseType: 'json',

通过实例的方式请求

  1. //由于通过 axios直接请求 设置全局配置ip 等无法改变 可通过创建实例的方式单独设置
  2. const instance = axios.create({
  3.   baseURL:"http://123.207.32.32:8000",
  4.   timeout:5000
  5. });
  6. instance({
  7.   url:'/home/data',
  8.   params:{type:'pop',page:'1'},
  9.   method:'get'
  10. }).then(res=>{
  11.   console.log(res);
  12. });

axios的封装

  1. 在每个组件中发送网络请求时都需要通过import axios from 'axios'去重新引用
  1. import axios from 'axios'
  2. export default function request(config){
  3.     const instance = axios.create({
  4.         baseURL:"http://123.207.32.32:8000",
  5.         timeout:5000
  6.     });
  7.     //发送真正的网络请求
  8.     return instance(config);
  9. }
  10. 使用 组件创建时请求
  11.  created(){
  12.     request({//传递的请求信息
  13.       url:'/home/data',
  14.       params:{type:'pop',page:'1'},
  15.       method:'get'
  16.     }.then(sussece=>{
  17.         //then 和 catch 执行成功或者失败的内容
  18.         suc(sussece);
  19.     }).catch(error=>{
  20.         err(error);
  21.     })
  23.   }

拦截器

  1.   instance.interceptors.request.use(succ=>{
  2.         //请求的全部信息
  3.         console.log(succ);
  4.         //放行
  5.         return succ
  6.     },error=>{
  7.         //出现错误信息
  8.         console.log(error);
  9.     })
  10.     //响应时的拦截器
  11.     instance.interceptors.response.use(succ=>{
  13.         return succ
  14.     },error=>{
  15.         //出现错误信息
  17.     })
  1. 可以做的事情
  2. 比如 config中的信息不符合服务要求进行拦截处理
  3. 比如每次请求时 可以在页面显示一个加载图标
  4. 某些网络请求 必须携带特殊信息 不携带跳转到其他位置

文件下载问题

  1. import axios from "axios";
  3. const service = axios.create({
  4.     responseType: 'arraybuffer' //设置响应的数据类型 下载文件要设置成arraybuffer 或者blob
  5. });
  6. service.interceptors.request.use(config => {
  7.     let item = window.sessionStorage.getItem('tokenStorage');
  8.     if (item) {
  9.         //向请求头中加入携带信息
  10.         config.headers['Authorization'] = item;
  11.     }
  12.     return config;
  13. },error => {
  14.     if (error.response.code == 403){
  15.         console.log("1")
  16.     }
  17. });
  18. //在响应拦截器中
  19. service.interceptors.response.use(config => {
  20.         //获取响应结果中的数据 通过Blob对象转换成二进制文件流
  21.         const blog = new Blob([config.data]);
  22.         //将二进制数据流生成一个本地的URL
  23.         const href = window.URL.createObjectURL(blog)
  24.         //创建一个a标签
  25.         let a = document.createElement('a')
  26.         //设置路径
  27.         a.href = href
  28.         //设置下载文件的名字 -- 如果没有会在页面中显示
  29.         a.download = "员工表.xls"
  30.         //加入到Body中
  31.         document.body.appendChild(a)
  32.         //点击--会自动下载下来
  33.         a.click()
  34.         //删除本地的URL
  35.         window.URL.revokeObjectURL(href)
  36.         //删除a标签
  37.         document.body.removeChild(a)
  39. });
  40. export const downloadUser = (url, parms) => {
  41.     return service({
  42.         method: 'get',
  43.         url,
  44.         data: parms
  45.     });

使用

  1. downloadUser('http://localhost:8081/employee/basic/downloadUser');