如有不正,请指正!

一、为什么选择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. 聊一聊 HBase 是如何写入数据的?

    hi,大家好,我是大D.今天继续了解下 HBase 是如何写入数据的,然后再讲解一下一个比较经典的面试题. Region Server 寻址 HBase Client 访问 ZooKeeper: 获取 ...

  2. 1.还不会部署高可用的kubernetes集群?看我手把手教你使用二进制部署v1.23.6的K8S集群实践(上)

    公众号关注「WeiyiGeek」 设为「特别关注」,每天带你玩转网络安全运维.应用开发.物联网IOT学习! 本章目录: 0x00 前言简述 0x01 环境准备 主机规划 软件版本 网络规划 0x02 ...

  3. Flask_WTF实现表单

    Flask_WTF实现表单可分为六个步骤: ①导入FlaskForm扩展包(from flask_wtf import FlaskForm) ②导入StringField,PasswordField, ...

  4. 第24章 Java 数据类型转换

    每日一句 井底点灯深烛伊,共郎长行莫围棋. 每日一句 What we call "failure" is not falling down, but the staying dow ...

  5. 开源的.Net 工作流引擎Elsa初试——创建工作流服务器和图形化工作流配置管理应用

    微软的Workflow Foundation基于.Net Framework,并且没有向.Net Core迁移的计划.我们的很多项目使用了工作流引擎,这些项目向.Net Core以及更高版本迁移时遇到 ...

  6. SpringCloud 配置管理:Nacos

    目录 统一配置管理 配置热更新 配置共享 多环境配置共享 多服务配置共享 统一配置管理 将配置交给 Nacos 管理的步骤: 在 Nacos 中添加配置文件. 在微服务中引入 nacos 的 conf ...

  7. 线上问题定位利器 jprofiler

    1.导出dump windows: jps -l   查看Java进行 jmap -dump:format=b,file=webapi.hprof 20840 查看进程,根据进程号导出hprof文件 ...

  8. python爬虫之protobuf协议介绍

    前言 在你学习爬虫的知识过程中是否遇到下面的类型.如果有兴趣学习一下或者了解相关知识的,且不嫌在下才疏学浅,可以参考一下.欢迎各位网友的指正. 首先叙述一下问题的会出现的式样. 你可能会在请求参数中看 ...

  9. UiPath官方视频Level1

    [UiPath官方视频Level1]第一课-UiPath简介https://www.bilibili.com/video/BV1zJ41187vB [UiPath官方视频Level1]第二课-变量和数 ...

  10. bat-命令行配置静态IP地址

    查看连接名称ipconfig 打开命令提示符,输入netsh后回车 输入interface后回车 输入ip,回车 输入set address "连接名称" static 新IP地址 ...