vue之请求axios
如有不正,请指正!
一、为什么选择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的更多相关文章
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法
正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...
- VUE 数据请求和响应(axios)
1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...
- vue全局使用axios插件请求ajax
vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推 ...
- vue.js请求数据(axios)
使用npm安装axios npm install axios --save 在main.js中引入axios import axios from "axios"; 注册axios到 ...
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- 把axios挂载到vue实例上面/==Axios 各种请求方式传递参数格式
/*ajax请求*/ import axios from 'axios' axios.defaults.baseURL = 'https://api.douban.com/v2/movie' ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
随机推荐
- 152. Maximum Product Subarray - LeetCode
Question 152. Maximum Product Subarray Solution 题目大意:求数列中连续子序列的最大连乘积 思路:动态规划实现,现在动态规划理解的还不透,照着公式往上套的 ...
- 个人冲刺(四阶段)——体温上报app(一阶段)
任务:完成了后台数据库的类模块 MyDBHelper.java package com.example.helloworld; import android.content.Context; impo ...
- 基于 GraphQL 的 BFF 实践
随着软件工程的发展,系统架构越来越复杂,分层越来越多,分工也越来越细化.我们知道,互联网是离用户最近的行业,前端页面可以说无时无刻不在变化.前端本质上还是用户交互和数据展示,页面的高频变化意味着对数据 ...
- 「JOISC 2019 Day4」蛋糕拼接 3
loj 3039 NKOJ Description \(n\)个蛋糕,每个蛋糕有\(w_i,h_i\).选\(m\)个蛋糕满足\(\sum\limits_{j=1}^mw_{k_j}-\sum\lim ...
- Java到底是解释型还是编译型语言
Java到底是解释型还是编译型语言? 定义 回答这个问题,我们首先来看下概念: 开发人员编写代码,语言是人类可理解的方式,是具有语义的,然而计算机无法理解和执行,因此需要做一层转换. 解释型语言: 运 ...
- cuda在ubuntu的安装使用分享
前言 之前给大家分享过opencv在jetson nano 2gb和ubuntu设备中使用并且展示了一些人脸识别等的小demo.但是对于图像处理,使用gpu加速是很常见 .(以下概念介绍内容来自百科和 ...
- GitHub 简介
用详细的图文对GitHub进行简单的介绍. git是一个版本控制工具,github是一个用git做版本控制的项目托管平台. 主页介绍: overview:总览.相当于个人主页. repositorie ...
- STM32时钟系统配置程序源码深入分析
一.分析程序的目的 最近我在移植实时系统是遇到了一些问题,所以决定深入了解系统时钟的配置过程,当然想要学好stm32的小伙伴也有必要学习好时钟系统的配置,所以我将学习的过程再次记录,有写得不好的地方, ...
- 技术分享 | app自动化测试(Android)--元素定位方式与隐式等待
原文链接 元素定位是 UI 自动化测试中最关键的一步,假如没有定位到元素,也就无法完成对页面的操作.那么在页面中如何定位到想要的元素,本小节讨论 Appium 元素定位方式. Appium的元素定位方 ...
- BUUCTF-穿越时空的思念
穿越时空的思念 音频题的话一般是摩尔斯电码,软件打开音频发现 短的为. 长的为- 空缺的为空格 ..-. ----- ..--- ----. -... -.. -.... ..-. ..... ... ...