封装属于自己的axios请求

时间: 2020-04-25阅读: 962标签: axios

摘要

axios是一个基于promise的HTTP库,可以用于浏览器中进行AJAX请求处理。在项目中,为了实现通用性,封装了一个axios请求。

 

axios封装

1、配置环境变量

// 根据不同环境变量选择不同的接口服务器域名
export const BASE_URL = process.env.react_APP_API;


2、创建axios实例

创建axios实例可以根据官方文档进行属于自己的配置,具体属性可以参考https://www.kancloud.cn/yunye/axios/234845

// 创建axios实例
const service = axios.create({
baseURL: BASE_URL,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
timeout: 5 * 1000 // 请求超时时间
});


3、创建request拦截器

在请求、响应被then 或 catch 处理前拦截它们,在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。

// request拦截器
service.interceptors.request.use(
config => { // 登录时,Token登录
// const token =
// localStorage.getItem('token') || sessionStorage.getItem('token');
// if (token) {
// config.headers.Authorization = 'JWT ' + token;
// }
return config;
},
error => {
// Do something with request error
console.log(error); // for debug
return Promise.reject(error);
}
);


4、创建response拦截器

// response 拦截器
service.interceptors.response.use(
response => {
const data = response.data;
if (data.code === 2000) {
return data.data;
}
if (data.code === 4040) {
return Promise.reject({message: '网络中断'});
}
if (data.code === 4030) {
return Promise.reject({message: '登录过期'});
}
return Promise.reject(data);
},
error => {
error.message = '网络超时';
return Promise.reject(error);
}
);

来自:https://www.cnblogs.com/BlueBerryCode/p/12882977.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/9143

vue axios 拦截器

项目中需要验证登录用户身份是否过期,是否有权限进行操作,所以需要根据后台返回不同的状态码进行判断。axios的拦截器分为请求拦截器和响应拦截器两种。我一般把拦截器写在main.js里。

vue使用axios实现excel文件下载的实现

前端VUE页面上的导出或者下载功能,一般是调用后端的一个接口,由接口生成excel,word这些文件的流信息,返回给vue,然后由vue去构建下载的动作,这边整理了一下,封装了一下,方便以后复用

如何实现 axios 的自定义适配器 adapter

我们想基于 axios 扩展一些自己的数据请求方式(例如 mock 数据,某些 APP 内专属的数据请求方式等),并能够使用上 axios 提供的便捷功能,该怎么自定义一个适配器 adapter

axios处理Http请求的基本使用方法总汇

axios的功能特性:在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全免受 XSRF 攻击

vue封装axios和利用拦截器监控返回的token的变化和报错信息

步骤一:安装axios进入vue-cli;步骤二:新建一个httpConfig文件下,创建两个js文件,一个作为axios拦截器用,一个封装接口;步骤三:在serviceAPI.config.js中封装所有的API接口

axios基于常见业务场景的二次封装

axios的二次封装,功能实现:1.兼容ie浏览器避免缓存2.减少或更新重复请求3.接口域名使用环境变量4.全局loading状态5.可关闭的全局错误提醒6.可开启携带全局分页参数

vue中Axios的封装和API接口的管理

我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库

vue中axios的使用与封装

分享下我自己的axios封装,axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建文件夹 service / index.js,接着上代码

Vue项目中使用Axios封装http请求

使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息。请求超时的时候断开请求,还可以很方便地使用then或者catch来处理请求。

axios前端加密通讯的处理

先谈谈项目前景,因为安全的要求,所以我们要把前端所有的请求都得加密与服务端应用进行通讯,当然服务端的响应也是加密的,前端也需要对应得解密。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!