4. Vue-Resource / axios 异步插件
安装
cnmp i vue-resource --save (--save 安装到dependencies下)
引用
<script src="node_modules/vue-resource/dist/vue-resource.min.js"></script>
Vue-resource
7种请求API
- get ( url , [options] ) 从服务器端拿数据
- head
- delete
- jsonp
- post 提交数据
- put
- patch
get:function(){
this.$http.get('package.json',{
params:{
userId:"101"
},
headers:{//配置
token:"acc"
}
}).then(function(res){
this.msg=res.data;
},error=>{
this.msg=error;
})
},
post(){
this.$http.post('package.json',{
params:{
userId:"101"
},
headers:{
token:"abc"
}
}).then(res=>{
this.msg=res.data;
},error=>{
this.msg=error;
})
},
jsonp(){//跨域,模拟script标签发送get请求
this.$http.jsonp('http://www.imooc.com/course/AjaxCourseMembers?ids=912').then(res=>{
this.msg=res.data;
})
},
http(){
//配置方式
this.$http({
url:'package.json',
method:'Get',
params:{
userId:"101"
},
timeout:50,
before(){
console.log("请求前")
}
}).then(res=>{
this.msg=res.data;
})
}
参数
全局拦截器 interceptors
mounted: function() {
//全局拦截器
Vue.http.interceptors.push(function(request,next){//请求,流转
console.log('请求初始化');
next(function(response){
console.log('请求后');
return response;
})
})
},
http:{
root:"http://localhost:8090/ImoocMall/" //全局路径配置
}
Axios
没有jsonp,多了options
axios.all
可以同时调用两个接口
没有挂载到vue实例里
mounted: function() {
//全局拦截器
axios.interceptors.reuest.use(function(config) {
console.log('请求初始化');
return config;
})
axios.interceptors.response.use(function(response) {
console.log('请求响应后');
return response;
})
},
methods: {
get: function() {
axios.get("package.json", {
params: {
userId: '99'
}
}).then(res => {
this.msg = res.data;
}).catch(error => {
console.log(error);
})
},
post() {
axios.post("package.json").then(res => {
this.msg = res.data;
})
},
http() {
axios({
url: 'package.json',
method: 'post',
params: {
userId: "101"
},
data: {
userId: "102"
}
}).then(res => {
this.msg = res.data;
})
}
}
import axios from 'axios'
axios.defaults.baseURL = 'http://local.api.animesama.com:888'
Vue.prototype.axios = axios
//最后一行是将axios配置到Vue原型中,使用方法为:
this.axios.get('/test/1').then(res=> {})
import axios from 'axios'
// 拦截request,设置全局请求为ajax请求
axios.interceptors.request.use((config) => {
config.headers['X-Requested-With'] = 'XMLHttpRequest'
return config
})
// 拦截响应response,并做一些错误处理
axios.interceptors.response.use((response) => {
const data = response.data
// 根据返回的code值来做不同的处理(和后端约定)
switch (data.code) {
case '0':
// 举例
// exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题
if (isIOS()) {
// 异步以保证数据已渲染到页面上
setTimeout(() => {
// 通过滚动强制浏览器进行页面重绘
document.body.scrollTop += 1
}, 0)
}
// 这一步保证数据返回,如果没有return则会走接下来的代码,不是未登录就是报错
return data
// 需要重新登录
case 'SHIRO_E5001':
// 微信生产环境下授权登录
if (isWeChat() && IS_PRODUCTION) {
axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {
location.replace(global.decodeURIComponent(result))
})
} else {
// 否则跳转到h5登录并带上跳转路由
const search = encodeSearchParams({
next: location.href,
})
location.replace(`/user/login?${search}`)
}
// 不显示提示消息
data.description = ''
break
default:
}
// 若不是正确的返回code,且已经登录,就抛出错误
const err = new Error(data.description)
err.data = data
err.response = response
throw err
}, (err) => { // 这里是返回状态码不为200时候的错误处理
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
err.message = '未授权,请登录'
break
case 403:
err.message = '拒绝访问'
break
case 404:
err.message = `请求地址出错: ${err.response.config.url}`
break
case 408:
err.message = '请求超时'
break
case 500:
err.message = '服务器内部错误'
break
case 501:
err.message = '服务未实现'
break
case 502:
err.message = '网关错误'
break
case 503:
err.message = '服务不可用'
break
case 504:
err.message = '网关超时'
break
case 505:
err.message = 'HTTP版本不受支持'
break
default:
}
}
return Promise.reject(err)
})
axios.install = (Vue) => {
Vue.prototype.$axios = axios
}
export default axios
4. Vue-Resource / axios 异步插件的更多相关文章
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
- 073——VUE中vuex之使用actions和axios异步初始购物车数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 使用axios 数据请求第三方插件的使用
axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...
- vue 中使用 async/await 将 axios 异步请求同步化处理
1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...
- Vue axios异步获取后台数据alert提示undefined
记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...
- vue使用axios进行ajax请求
以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...
- Vue 前后台交互,插件
目录 Vuex 插件 前端存储数据汇总 前后台交互方式(重点) axios 插件 同源策略-跨域问题 前后台分离项目交互流程 异步请求细节 Element-ui 插件 jQ + Bs插件 Django ...
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- 解决在vue中axios请求超时的问题
查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...
随机推荐
- SQL中union union all 和in的查询效率问题
UNION用的比较多union all是直接连接,取到得是所有值,记录可能有重复 union 是取唯一值,记录没有重复 1.UNION 的语法如下: [SQL 语句 1] UNION [SQL 语句 ...
- react入门安装
react的入门安装 1.react的适用方法有两种,其一是依赖在线的cdn地址: https://reactjs.org/docs/cdn-links.html 官方给的cdn地址如下 <sc ...
- HRBUST 1376 能量项链
能量项链 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HRBUST. Original ID: 13 ...
- Java 实现策略(Strategy)模式
策略模式:行为型模式 将同一行为,不同的处理算法分别封装起来.让它们之间能够互相替换 1. 定义一个超类型接口,及 行为方法 2. 定义不同的实现类,实现该行为的 不同的算法 /** * 策略模式:针 ...
- vim基础学习之搜索功能
当我们使用vim看源码的时候,我们可能会碰到一个方法或者变量,我们想要知道这个变量在其他地方的使用情况.这时候我们经常的做法就是退出当前的文件,或者是重新切换一个终端,然后使用grep或者find等s ...
- 44.Node.js Express 框架--web框架
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 简介 Express 是一个简洁而灵活的 node.js W ...
- dfs算法中求数列的组合
/* 从13个书中挑选5个值,他们的组合可能是 什么, 如下代码 dfs深度遍历, 和全排列是一种方法,但是思路不同 */ public class Main { static int count = ...
- SortedDictionary<TKey, TValue> 类 表示根据键进行排序的键/值对的集合。
SortedDictionary<TKey, TValue> 类 表示根据键进行排序的键/值对的集合. SortedDictionary<TKey, TValue> 中的每 ...
- spark network-common
概述 Spark底层使用netty作为节点间通信的桥梁.其实现在common/network-common包中.common/network-common包主要是对netty进行了一层封装,主要是定义 ...
- AutoCAD 许可管理器不起作用,或未正确安装,现在将关闭
问题描述 重新安装了也还是这样,而且第二次打开都跳不出申请码界面就关闭了. 问题原因,初步认为:AutoCAD 在首次弹出申请激活类型的类型时,直接选择了网络激活,而且没有激活成功.再想通过激活码的方 ...