axios的二次封装
'use strict'
import axios from 'axios'
import qs from 'qs' var host = "https://www.easy-mock.com/mock/5bb02bc0a0afc503f502a292/example"; axios.interceptors.request.use(config => {
// loading
//请求拦截
return config
}, error => {
return Promise.reject(error)
}) axios.interceptors.response.use(response => {
//响应拦截
return response
}, error => {
return Promise.reject(error.response)
}) function checkStatus(response) {
// loading
// 如果http状态码正常,则直接返回数据
if(response && (response.status === 200 || response.status === 304 || response.status === 400)) {
var res = response.data || {};
try{
if(typeof res == "string"){
res = JSON.parse(res);
}
//还可以判断数据是否正确
}catch(e){
console.warn("不是一个json数据:",res);
} //用于判断数据是否正确
if(res.success){
return res;
}else{
console.error("数据请求错误");
return Promise.reject(res);
} }else{
// 异常状态下,把错误信息返回去
//处理错误情况 return Promise.reject(response)
}
} export default {
post(url, data) {
data = data || {};
return axios({
method: 'post',
url: host + url,
data: qs.stringify(data),
timeout: 10000,
}).then(checkStatus).catch((e)=>{
console.error("统一处理的错误",e);
return Promise.reject(e);
});
},
get(url, params) {
params = params || {};
return axios({
method: 'get',
url: host + url ,
params, // get 请求时带的参数
timeout: 10000,
}).then(checkStatus).catch((e)=>{
console.error("统一处理的错误",e);
return Promise.reject(e);
});
}
}
import $http from "./http";
$http.get("/demo/secret",param).then((ret)=>{
console.info(ret);
return ret;
});
axios的二次封装的更多相关文章
- vue中axios的二次封装
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建 ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
- axios 请求二次封装
/** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function get(url, params) { ...
- axios 简单二次封装
import axios from 'axios' import { Message } from 'element-ui'; // 设置baseURL //axios.defaults.baseUR ...
- Vue:对axios进行简单的二次封装
主要做3点: 1.配置一个请求地址前缀 2.请求拦截(在请求发出去之前拦截),给所有的请求都带上 token 3.拦截响应,遇到 token 不合法则报错 // 对 axios 的二次封装 impor ...
- 原生 Ajax 封装 和 Axios 二次 封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
- axios 二次封装
一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...
- 【vue】axios二次封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
随机推荐
- 学JavaScript的感想小结1
学了几天的Javascript,刚开始就在想Java和JavaScript有什么不同,算了其实两个咱都不会也没多想了,带着这个好奇心学菜鸟教程,没想到还真得到了解答,瞬间兴趣提升,愿意追根溯源的教程还 ...
- what should I use .post vs .ajax?
what should I use .post vs .ajax? 问题: I've always had this dilemma困境 whether to use .post or .ajax f ...
- 微信小程序 scroll-view 填满剩余可用高度
根据微信小程序 scroll-view 文档所述,scroll-view必须给定一个固定高度.那么如果我们想要让它自动填充剩余高度,该怎么办呢? 前言 在说出我的解决方案之前,先来看一下我的页面设计, ...
- 基础数据结构 对应 基础api
<深入理解Redis> mastering redis
- python 设计模式之迭代器模式
#写在前面 真的有一大把年纪了,回头看看, 明明也很努力,却发现自己穷的一无所有,昨夜的事更是让我眼泪止不住的流,眼睛也肿了,委屈的愣是说不出一个字.前面荆棘丛生,身后已无退路,生活一地鸡毛,糟糕的一 ...
- java实现https免证书认证
java实现https免证书认证 解决方法: 1.下载两个包,httpclient-4.2.jar和httpcore-4.2.jar,复制以下代码就可使用. 2.调用类代码: String htt ...
- MySQL高性能优化指导思路
MySQL架构图: 连接池组件.管理服务和工具组件.SQL接口组件.查询分析器组件.优化器组件.缓冲组件.插件式存储引擎.物理文件: 1.连接层:主要完成一些类似于连接处理,授权认证及相关的方案: 2 ...
- [多转合成] 使用pycaffe保存各个层的特征图
# coding=utf-8 #python2 caffe_visualize.py import numpy as np import matplotlib.pyplot as plt import ...
- Unity3D 原来Unity比较新的版本支持中文
注意: Unity 2018.2 以上版本才可以
- 阿里云主机如何设置swap
简介:swap交换空间实际上是一个磁盘分区,在安装操作系统时,默认划分出物理内存的1~2倍空间用于交换分区,它类似于 Windows 的虚拟内存.系统会把一部分硬盘空间虚拟成内存使用,将系统内非活动内 ...