vue中axios的深入使用
// 引入模块
import axios from "axios"
import qs from 'qs' // 是否允许跨域
axios.defaults.withCredentials=true; // axios初始化:延迟时间,主路由地址
let instance = axios.create({
baseURL: 'https://easy-mock.com/mock/5b7bb6b9d02c1e7f50b4102f/example/',
timeout: 10000,
}); // 设置拦截器
instance.interceptors.request.use(function(config){
//在发送请求之前做某事
return config;
},function(error){
//请求错误时做些事
return Promise.reject(error);
});
//响应拦截器
instance.interceptors.response.use(function(response){
//对响应数据做些事
return response;
},function(error){
//请求错误时做些事
return Promise.reject(error);
}); // 是否销毁拦截器
// 1.给拦截器起个名称 var myInterceptors = instance.interceptors.requesst.use();
// 2.instance.interceptors.request.eject(myInterceptor); // 请求成功的回调
function checkStatus(res) {
//请求结束成功
if (res.status === 200 || res.status === 304) {
return res.data
}
return {
code: 0,
msg: res.data.msg || res.statusText,
data: res.statusText
}
return res
}
// 请求失败的回调
function checkCode(res) {
if (res.code === 0) {
throw new Error(res.msg)
}
return res
}
//模块化导出
export default {
get(url, params) {
if (!url) return;
return instance({
method: 'get',
url: url,
params,
timeout: 30000
}).then(checkStatus).then(checkCode)
},
post(url, data) {
if (!url) return;
return instance({
method: 'post',
url: url,
data: qs.stringify(data),
timeout: 30000
}).then(checkStatus).then(checkCode)
},
postFile(url, data) {
if (!url) return;
return instance({
method: 'post',
url: url,
data
}).then(checkStatus).then(checkCode)
}
}
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "./utils/axios"
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
<template>
<div class="home">
<h3>这里是首页</h3> </div>
</template>
<script>
export default {
methods: {
loadData: function () {
let s = new Promise((resolve,reject) => {
this.$http.get("query",{name:"任嘉慧"})
.then(res => {
console.log(res);//获取数据
// 可通过resolve发送给后端一些参数:resolve(res.data.xxx);
})
.catch(error => {
console.log(error);
})
});
}
},
mounted () {
this.loadData();
}
}
</script>
<style scoped>
.home {
width: 100%;
flex: 1;
overflow-y: auto;
}
</style>
vue中axios的深入使用的更多相关文章
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue中axios使用二:axios以post,get,jsonp的方式请求后台数据
本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...
- vue中axios的安装使用
axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法. 安装 npm install axios -S 在main.js配置 import axios ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue 中axios 的基本配置和基本概念
axios的基本概念及安装配置方法 ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 初步使用vue中axios
1.下载axios npm install axios --save 2.两种方式使用axios (1)在模块中引入axios 例如:我在用户登陆界面需要使用axios,就在login页面引入,不是全 ...
随机推荐
- RDB
在运行情况下, Redis 以数据结构的形式将数据维持在内存中, 为了让这些数据在 Redis 重启之后仍然可用, Redis 分别提供了 RDB 和 AOF 两种持久化模式. 在 Redis 运行时 ...
- pagehelper的使用
知识点:使用pagehelper实现分页功能 参考资料github上:https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wiki ...
- Tornado异步(2)
Tornado异步 因为epoll主要是用来解决网络IO的并发问题,所以Tornado的异步编程也主要体现在网络IO的异步上,即异步Web请求. 1. tornado.httpclient.Async ...
- swoole http_server 多进程并使用多进程处理消息
<?php $http = new swoole_http_server("0.0.0.0", 9511); $http->set([ 'worker_num' =&g ...
- ubuntu16.04后续工作
一.ruijie https://blog.csdn.net/u012217085/article/details/24369335 https://blog.csdn.net/Lv_Victor/a ...
- sickit-learn库实现机器学习
sickit-learn库实现机器学习 [TOC] Iris数据集 from sklearn import datasets iris=datasets.load_iris() # 数据 iris.d ...
- 秒懂算法2——选择排序(C#实现)
算法思路: 每趟走访元素揪出一个最小(或最大)的元素,和相应位置的元素交换.(用数组{6,9,13,2,4,64} 举例) {},{6 9 13 [2] 4 64} //第一趟,揪出2 {2} ...
- Javascript知识点汇总-初级篇
JavaScript的数据类型都有什么? 基本数据类型:String,Boolean,Number,Undefined, Null 引用数据类型:Object(Array,Date,RegExp,Fu ...
- SQL Server----解决SQL Server 配置管理器不见了
错误重现: 之前安装好的SQL Server 2012打开都没有问题,好多天没有打开了,今天打开我的SQL Server 2012 连接时出现错误: 在与SQL Server 建立连接时出现与网络相关 ...
- Python基础笔记系列九:变量、自定义函数以及局部变量和全局变量
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 变量在前面的系列中也许就可以发现,python中的变量和C中的变量有些许不 ...