vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios
//引入axios import axios from 'axios' let cancel ,promiseArr = {} const CancelToken = axios.CancelToken; //请求拦截器 axios.interceptors.request.use(config => { //发起请求时,取消掉当前正在进行的相同请求 if (promiseArr[config.url]) { promiseArr[config.url]( '操作取消' ) promiseArr[config.url] = cancel } else { promiseArr[config.url] = cancel } return config }, error => { return Promise.reject(error) }) //响应拦截器即异常处理 axios.interceptors.response.use(response => { return response }, error => { if (error && 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 = '请求错误,未找到该资源' break ; case 405: err.message = '请求方法未允许' 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 : err.message = `连接错误${err.response.status}` } } else { err.message = "连接到服务器失败" } message.error(err.message) return Promise.resolve(error.response) }) axios.defaults.baseURL = '/api' //设置默认请求头 axios.defaults.headers = { 'X-Requested-With' : 'XMLHttpRequest' } axios.defaults.timeout = 10000 export default { //get请求 get (url,param) { return new Promise((resolve,reject) => { axios({ method: 'get' , url, params: param, cancelToken: new CancelToken(c => { cancel = c }) }).then(res => { resolve(res) }) }) }, //post请求 post (url,param) { return new Promise((resolve,reject) => { axios({ method: 'post' , url, data: param, cancelToken: new CancelToken(c => { cancel = c }) }).then(res => { resolve(res) }) }) } } |
说明
1.为防止发起请求时,当前正在进行的相同请求,在请求拦截器中加入了hash判断,将相同请求url拦截
2.将axios中get,post公共配置抽离出来
axios.defaults.baseURL = '/api' //设置默认请求头 axios.defaults.headers = { 'X-Requested-With' : 'XMLHttpRequest' } axios.defaults.timeout = 10000 |
3.get,post请求的封装
可能你会问,这里的axios返回的就是promise对象,为什么还要再次对get,post封装一次promise.因为我这边的话,在开发中使用async
await会出现数据请求失败的情况,报的错就是返回的不是promise对象。(ps:可async
await返回的就是promise呀,这个问题后续再搞一下)就直接return了一个promise对象,以避免上面的错误。下面是请求接口的一个例子
import req from '../api/requestType' /** 4. 拼团详情 */ export const groupDetail = param => { return req.get( '/RestHome/GroupDetail' ,param) } |
下面是数据的获取
async getData() { const params = { TopCataID: 0, pageNumber: this .pageNumber, pageSize: this .pageSize } const res = await groupList(params) }, |
1.在相应拦截器中对请求常见的错误进行了全局异常处理
axios.interceptors.response.use(response => {... |
到这里我们就简单的封装了一下适合自己项目的axios
vue项目中对axios的二次封装的更多相关文章
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- 介绍vue项目中的axios请求(get和post)
一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...
- vue项目中关于axios的简单使用
axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...
- 在vue项目中使用axios
安装 cnpm i axios --save-dev 在项目main.js中全局引用 import axios from "axios" Vue.prototype.$http=a ...
- vue项目中使用axios上传图片等文件
form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue项目中 axios 和Vue-axios的关系
文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码: 今天看到有些项目是这样写的,就有点看不懂了. ----解 ...
随机推荐
- tomcat-users.xml 配置
一:tomcat6配置管理员信息 1:打开tomcat6下的~/conf/tomcat-users.xml文件,关于用户角色.管理员的信息都在这个配置文件中. 2:在配置文件<tomcat-us ...
- SQL语句-INSERT语句
Insert语句 Insert语句三种写法: mysql> desc students; +-------+-------------+------+-----+---------+------ ...
- shell获取字符串长度
方法1: 使用wc -L命令 wc -L可以获取到当前行的长度,因此对于单独行的字符串可以用这个简单的方法获取,另外wc -l则是获取当前字符串内容的行数. 代码如下: echo "abc& ...
- CSS3属性详解(图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...
- BZOJ 2806: [Ctsc2012]Cheat [广义后缀自动机 单调队列优化DP 二分]
2806: [Ctsc2012]Cheat 题意: 多个主串和多个询问串,每次询问将询问串分成多个连续子串,如果一个子串长度>=L且在主串中出现过就是熟悉的 如果熟悉的字符串长度>=询问串 ...
- c语言输入一个字符串,统计其字母,数字和其他字符的个数,并以柱状图输出
#include<stdio.h>int main(int arge,char *argv[]){ char ch; int alp=0,num=0,oth=0,len,alp_start ...
- java中的@Override标签
@Override标签的作用: @Override是伪代码,表示方法重写. @Override标签的好处: 1.作为注释,帮助自己检查是否正确的复写了父类中已有的方法 2.便于别人理解代码 3.编译器 ...
- centos java环境搭建
我个人配置的是阿里云centos 7.4 64bit 不存在openjdk 看下面内容的情况下看是否存在openjdk java -version 如果返回java版本值,则存在openjdk,需要卸 ...
- 常见dos命令总结
常用的内部命令有MD.CD.RD.DIR.PATH.COPY.TYPE.EDIT.REN.DEL.CLS.VER.DATE.TIME.PROMPT. 常用的外部命令有DELTREE.FORMAT.DI ...
- javascript Map和Set
Map和Set JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实 ...