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从零开始搭建自己的网站

vue-resource对比axios import ... from和import {} from 的区别 element-ui的更多相关文章

  1. vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。

    老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...

  2. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

  3. vue中的import、export、requre的区别

    在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现.在es6发布之后js又引入了import的概念使得不清楚两者之间的区别的同学在实际使用过程中造成了自己的误解, ...

  4. vue中使用axios

    1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...

  5. vue中使用axios最详细教程

    前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...

  6. vue全局使用axios插件请求ajax

    vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...

  7. vue组件,axios ,路由

    组件(Component)自定义封装的功能. 把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 组件就是一个html网页中的功 ...

  8. vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件

    vue中创建路由 每一个vue组件都有三部分组成 template:放html代码 script:放js相关 style:放css相关 vue中创建路由 1.先创建组件 Course.vue 2.ro ...

  9. vue全局使用axios的方法

    在vue项目开发中,我们使用axios的二次封装,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vu ...

随机推荐

  1. TreeMap、HashMap、LindedHashMap的区别

    LinkedHashMap可以保证HashMap集合有序.存入的顺序和取出的顺序一致.TreeMap实现SortMap接口,能够把它保存的记录根据键排序,默认是按键值的升序排序,也可以指定排序的比较器 ...

  2. python3笔记十五:python函数

    一:学习内容 函数概述 函数的参数与返回值 参数值传递和引用传递 关键字参数 默认参数 不定长参数 二:函数概述 1.本质:函数就是对功能的封装 2.优点: 简化代码结构,增加了代码的复用度(重复使用 ...

  3. 【Linux】单计算机安装PBS系统(Torque)与运维

    1.此次使用torque-5.0.0-1_43d8f09a.tar.gz这个版本http://www.adaptivecomputing.com/downloading/?file=/torque/t ...

  4. 后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」

    后盾网lavarel视频项目---Laravel 安装代码智能提示扩展「laravel-ide-helper」 一.总结 一句话总结: laravel-ide-helper作用是:代码提示 larav ...

  5. Python学习笔记:类

    类可以将数据与函数封装起来,用一个例子解释,先定义一个类: class athlete: def __init__(self,a_name,a_dob=None,a_times=[]): self.n ...

  6. note: Spanner: Google’s Globally-Distributed Database

    1. Abstract & introduction ref:http://static.googleusercontent.com/media/research.google.com/zh- ...

  7. @RequestHeader和@CookieValue的使用

    /** * 了解: * * @CookieValue: 映射一个 Cookie 值. 属性同 @RequestParam */ @RequestMapping("/testCookieVal ...

  8. 代码实现:输入3个数a,b,c,按大小顺序输出。

    import java.util.Arrays; import java.util.Scanner; //输入3个数a,b,c,按大小顺序输出. public class Test34 { publi ...

  9. Xmanager power suit 6 最新版注册激活附注册机

    转自:https://blog.csdn.net/the_liang/article/details/82708907 Xmanager Power Suit 6.0.0109 最新版注册激活,长期更 ...

  10. 老白关于rac性能调优的建议

    RAC应用设计方面需要在底层做很有设计.虽然ORACLE的售前人员总是说RAC的扩展性是透明的,只要把应用分到不同的节点,就可以平滑的扩展系统能力了.而事实上,RAC的CACHE FUSION机制决定 ...