关闭

封装属于自己的axios请求

时间: 2020-04-25阅读: 560标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

网络模块axios的简单应用

例子中使用到的url仅作为示例,不一定有效,想要复现代码需要使用能够提供数据的有效服务器接口url,axios:ajax i/o system;是用于在Vue.js中发送网络请求的第三方框架;可通过许多方式发送网络请求比如:

封装axios

创建一个server目录,在该目录下创建index.js文件,配置axios:使用create方法创建axios实例,封装请求方法:创建一个api.js文件

Vue中axios的封装

axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource

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

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

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

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

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

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

axios的特点与使用_解决处理axios兼容性问题

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用。项目中发现,在安卓4.3及以下的手机不支持axios的使用,主要就是无法使用promise。加上以下polyfill就可以了。

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

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

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

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

axios-mock-adapter_一个axios调试好用的工具

axios-mock-adapter可以用来拦截http请求,并模拟响应,使用起来也很简单,比如你想模拟下服务器返回个500错误,什么404找不到、403禁止访问、500服务器错误、503服务不可用、504网关超时等等,你都能模拟出来

点击更多...

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