zoukankan      html  css  js  c++  java
  • vue-resource对比axios import ... from和import {} from 的区别 element-ui

    1.vue-resource对比axios 

    文章1

    文章2

    1.0 axios  params 配置参数在url 显示,form-data 用于 图片上传、文件上传 

    1.1 axios 全局配置

    axios.defaults.baseURL=‘http:localhost:8080’

    1.2 axios 实例配置

    let instance=axios.create()

    instance.defaults.timeout=3000

    或者

    let instance=axios.create({

    timeout:3000
    })

    instance.get('data/json',{

    params:{id:1}

    }).then(

    (res)=>{

    console.log(res)

    })

    1.3 axios 请求配置

    instance.get('/data.json',{

    timeout:3000

    })

    1.4 拦截器

    1.4.1 请求拦截器

    axios.interceptors.request.use(

    config=>{ return config },

    err=>{ return Promise.reject(err) }

    )

    1.4.2 响应拦截器

    axios.interceptors.response.use(

    res=>{ return res },

    err=>{ return Promise.reject(err) }

    )

    1.4.3 取消拦截器

    axios.interceptors.response.eject(interceptors)

    1.4.4 实际例子 :登录权限

    let instance=axios.create({})

    instance.interceptors.request.use(

    config=>{

    //$('load').show()

    config.headers.token='';

    return config

    }

    )

     1.5 取消请求

    let source=axios.CancleTaken.source();

    axios.get('/list',{

    CancleTaken:source.token

    }).then().catch()

    取消(场景:查询结果时间过长)

    source.cancle('mes')

    扩展:

    扩展 1.  post delete put get  常用写法

    // 增删改查 postdeleteput(patch:part change)get
        // 1.get
    
        // axios.get('/data.json').then(res=>{
        //   console.log(res);
        // })
    
        // axios.get('/data.json',{
        //   params:{
        //     id:100
        //   }
        // }).then(res=>{
        //   console.log(res);
        // })
    
        // axios({
        //   url:'/data.json',
        //   method:'get',
        //   params:{
        //     id:200
        //   }
        // }).then(res=>{
        //   console.log(res);
        // })
    
        // 2.post
        // form-data 表单提交:图片、文件上传
        // application/json
    
        // axios.post('/data',{
        //   arr:[1,2]
        // }).then(res=>{
        //   console.log(res);
        // })
    
        // axios({//get error way  -  query string parameters 
        //   url:'/data',
        //   method:'post',
        //   params:{
        //     arr:[3,4]
        //   }
        // }).then(res=>{
        //   console.log(res);
        // })
    
        // axios({  // request payload    content-type: application/json
        //   url:'/data',
        //   method:'post',
        //   data:{
        //     arr:[3,4]
        //   }
        // }).then(res=>{
        //   console.log(res);
        // })
    
        let data = {
          id:300
        };
        let myform = new FormData();
        for(let key in data){
          myform.append(key,data[key])
        }
    
        // axios({  // content-type: multipart/form-data
        //   url:'/data',
        //   method:'post',
        //   data:myform
        // }).then(res=>{
        //   console.log(res);
        // })
    
        axios.post('/data',myform).then(res=>{
          console.log(res);
        })
    View Code

    扩展 2. 并发请求

        axios.all([
          axios.get('/data.json'),
          axios.get('/data.json')
        ]).then(
          axios.spread((res1,res2)=>{
            console.log(res1,res2);
          })
        )
    View Code

    2. import ... from和import {} from 的区别

    文章1

    文章2 简版

    3.element-ui

    Vue + ElementUI 手撸后台管理网站

    Vue+ElementUI从零开始搭建自己的网站

  • 相关阅读:
    C# 数组
    一个遍历算法
    php csv导出
    linux 配置 crontab
    LINUX 配置SVN
    Linux chkconfig命令
    Linux 安装mysql+apache+php
    linux 安装samba
    linux安装软件的学习
    LINUX中简单的字符命令
  • 原文地址:https://www.cnblogs.com/justSmile2/p/11173530.html
Copyright © 2011-2022 走看看