安装

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 异步插件的更多相关文章

  1. Vue中 axios+QS 插件往后台传参

    之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...

  2. 073——VUE中vuex之使用actions和axios异步初始购物车数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 使用axios 数据请求第三方插件的使用

    axios 基于http客户端的promise,面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 ...

  4. vue 中使用 async/await 将 axios 异步请求同步化处理

    1. axios 常规用法: export default { name: 'Historys', data() { return { totalData: 0, tableData: [] } }, ...

  5. Vue axios异步获取后台数据alert提示undefined

    记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...

  6. vue使用axios进行ajax请求

    以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...

  7. Vue 前后台交互,插件

    目录 Vuex 插件 前端存储数据汇总 前后台交互方式(重点) axios 插件 同源策略-跨域问题 前后台分离项目交互流程 异步请求细节 Element-ui 插件 jQ + Bs插件 Django ...

  8. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  9. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

随机推荐

  1. React开发实时聊天招聘工具 -第五章 需求分析

    Axios的使用 axios.get('/data') .then(res=>{ if(res.status==200) this.setState(data:res.data) })

  2. Metro界面的真正意义

    昨天去客户那给安装防火墙和交换机,因为客户和我们公司签订了维保的合同,然后我们公司两个人去了客户那跟客户沟通也去顺路去做巡检. 客户之前跟我们公司采购了一台DELL的PC服务器,预装了win serv ...

  3. 今日SGU 5.20

    SGU 404 题意:.. 收获:取模 #include<bits/stdc++.h> #define de(x) cout<<#x<<"="& ...

  4. ArcGIS Engine中的重点类库介绍

    转自原文ArcGIS Engine中的重点类库介绍 System类库 System类库是ArcGIS体系结构中最底层的类库.System类库包含给构成ArcGIS的其他类库提供服务的组件.System ...

  5. 上下文切换查看 & sar

    怀疑CPU存在瓶颈,可用sar -u 和sar -q来看,怀疑I/O存在瓶颈,可用sar -b.sar -u和 sar-d来看 sar –W 查看页面交换发生状况 [root@localhost ~] ...

  6. hdu 5073 Galaxy(2014 鞍山现场赛)

    Galaxy                                                                   Time Limit: 2000/1000 MS (J ...

  7. HTML5:标记文字

    文本层面的元素(简称文本元素).把这些元素加入文本其中,也就引入了结构和含义. HTML5规范明白指出:使用元素应该全然从元素的语义出发.但这类元素中有些元素的含义很明白,有些则比較含糊. 在元素的使 ...

  8. SQL查询结果排序

    <第二章:查询结果排序>1:以指定的次序返回查询结果条件:显示部门10中员工名字,职位和工资并按照工资升序排列:升序asc   降序descSELECT ename,job,sal FRO ...

  9. 给网站设置ICO图标

    方法一:         直接在站点根目录下放入名为:favicon.ico 的图标文件(必须要为 ICO 文件,BMP 及其他格式的图片文件不行).还有将 favicon.ico 中的 favico ...

  10. seq---生成随机数

    seq命令用于产生从某个数到另外一个数之间的所有整数. 语法 seq [选项]... 尾数 seq [选项]... 首数 尾数 seq [选项]... 首数 增量 尾数 选项 -f, --format ...