如有不正,请指正!

一、为什么选择axios
1、ajax 混乱复杂难用
2、vue-resource 官方不在维护 ajax的封装
3、所以所以 axios 对promise的封装
promise 更优雅的处理异步 避免回调地狱

二、基本使用
1、安装 npm i axios --save
2、导入注册使用
axios({
url: ‘’, // httpbin.org
method: '', 默认get
params:{

}
}).then()

http://123.207.32.32:8000/home/multidata
http://123.207.32.32:8000/home/multidata?callback=xx jsonp

3、参数 params get post :data

三、并发请求
axios.all(【ax1,ax2】).then(results => {

});

四、axios配置信息
0、main.js里面先注册
1、全局配置
配置:axios.defaults.baseUrl = 'http://123.207.32.32:8000'
使用:
axios({
url: ‘/home/multidata’, //
method: '',
params:{

}).then()

2、可配置的信息
a、url
b、超时时间
c、返回内容格式
d、请求头
e、身份信息

五、axios实例和封装
1、实例
function test (参数){
const a1 = axios.create({
baseUrl: '',
timeout: 5000
})
return a1(参数):a1实例本身就是promise
}
使用:test ({
url: '',
parmas: {}

}).then()

2、封装
封装全局注册 这样有变动 只需要改一个地方 不需要改所有使用到的文件

a、回调函数 函数作为参数传入另一个函数
b、包装一层promise
c、直接使用 本身就是返回promise

六、axios拦截器
1、用于在发送请求或得到相应后 进行的一些统一的对应处理

2、请求拦截
axios.interceptors.request.use(config => {
1、再次处理参数config
2、加loading效果
3、某些请求的特殊信息 如token

return config 必要

},error => {
})

3、响应拦截
axios.interceptors.response.use(res => {

响应状态200 实际code是其他 可能还有其他报错信息
表示 可以响应 通信正常 但是 携带信息 或者参数错误
return res

},error => {
对错误信息处理

})

vue之请求axios的更多相关文章

  1. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

    正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...

  2. VUE 数据请求和响应(axios)

    1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...

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

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

  4. vue.js请求数据(axios)

    使用npm安装axios npm install axios --save 在main.js中引入axios import axios from "axios"; 注册axios到 ...

  5. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  6. 把axios挂载到vue实例上面/==Axios 各种请求方式传递参数格式

    /*ajax请求*/   import axios from 'axios'   axios.defaults.baseURL = 'https://api.douban.com/v2/movie' ...

  7. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  8. axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

    1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...

  9. Vue中使用axios发送ajax请求

    作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...

随机推荐

  1. 实战派 | Java项目中玩转Redis6.0客户端缓存!

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是Hydra. 在前面的文章中,我们介绍了Redis6.0中的新特性客户端缓存client-side caching,通过tel ...

  2. Linux常用命令(超详细)

    一.基本命令 1.1 关机和重启 关机 shutdown -h now 立刻关机 shutdown -h 5 5分钟后关机 poweroff 立刻关机 重启 shutdown -r now 立刻重启 ...

  3. DevOps之敏捷开发

    初步了解一下敏捷开发及其流程 1 为什么要敏捷开发? 敏捷开发描述了一套软件开发的价值和原则,在这些开发中,需求和解决方案皆通过自组织跨功能团队达成. 1.1 背景与动机 当需求的不明确性和工程实现的 ...

  4. 561. Array Partition I - LeetCode

    Question 561. Array Partition I Solution 题目大意是,给的数组大小是2n,把数组分成n组,每组2个元素,每个组取最小值,这样就能得到n个值,怎样分组才能使这n个 ...

  5. 搭建NTP时间服务器~使用NTP同步时间~构建主机间时间自动同步关系

    NTP是一个时间服务器,同时它也是一个时间客户端. 我们可以使用它构建主机与主机之间的时间自动同步环境,保证所有服务器时间一致性. 常用的公共NTP时间服务器有: cn.ntp.org.cn 中国 n ...

  6. MySQL之SQL语句优化

    语句优化 即优化器利用自身的优化器来对我们写的SQL进行优化,然后再将其放入InnoDB引擎中执行. 条件简化 移除不必要的括号 select * from x where ((a = 5)); 上面 ...

  7. SpringBoot 错误(2)

    springBoot整合redis时,报错如下: org.springframework.data.redis.serializer.SerializationException: Cannot de ...

  8. python函数学习的总结

    python函数 part1 函数的作用: 函数以功能(完成一件事)为导向 随调随用减少代码重复性 增强代码可读性 函数的结构: def 函数名(): 函数体 函数的返回值 return:在函数中遇到 ...

  9. .net6.0 中一个接口多个实现的服务注册与注入

    1.现有一个数据库操作接口 如下   它有两个数据操作实现 Sqlserver 和MySql的数据库操作实现类 现在我们需要 将这个两个类 注册到MVC中 注意这里注册的服务类型都是 IDataBas ...

  10. 世界排名前三的Linux桌面发行版

    linux操作系统 1.MX Linux 2.Manjaro 3. Linux Mint 1.MX Linux https://mxlinux.org 中文用户不太友好 2.Manjaro https ...