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  常用写法

// 增删改查 post\delete\put(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);
    })

扩展 2. 并发请求

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

 

 

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

文章1

文章2 简版

 

3.element-ui

Vue + ElementUI 手撸后台管理网站

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