详解vue中axios请求的封装


Posted in Javascript onApril 08, 2019

axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库;封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理

安装

npm i axios

封装

我把axios请求封装在http.js中,重新把get请求,post请求封装了一次

首先,引入axios

import axios from 'axios'

设置接口请求前缀

一般我们开发都会有开发、测试、生产环境,前缀需要加以区分,我们利用node环境变量来作判断,

if (process.env.NODE_ENV === 'development') {
 axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
 axios.defaults.baseURL = 'http://prod.xxx.com'
}

在localhost调试时,直接用开发地址一般都会有跨域的问题,所以我们还需要配置代理

本项目是vue cli3搭建的,代理配置是在vue.config.js文件中:

module.exports = {
 devServer: {
 proxy: {
  '/proxyApi': {
  target: 'http://dev.xxx.com',
  changeOrigin: true,
  pathRewrite: {
   '/proxyApi': ''
  }
  }
 }
 }
}

这样就成功把/proxyApi 指向了 'http://dev.xxx.com',重启服务

修改一下http.js中的配置

if (process.env.NODE_ENV === 'development') {
 axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
 axios.defaults.baseURL = 'http://prod.xxx.com'
}

拦截器

接着设置超时时间和请求头信息

axios.defaults.timeout = 10000
// 请求头信息是为post请求设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

axios很好用,其中之一就是它的拦截器十分强大,我们就可以为请求和响应设置拦截器,比如请求拦截器可以在每个请求里加上token,做了统一处理后维护起来也方便,响应拦截器可以在接收到响应后先做一层操作,如根据状态码判断登录状态、授权。

// 请求拦截器
axios.interceptors.request.use(
 config => {
 // 每次发送请求之前判断是否存在token
 // 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况,此处token一般是用户完成登录后储存到localstorage里的
 token && (config.headers.Authorization = token)
 return config
 },
 error => {
 return Promise.error(error)
 })
// 响应拦截器
axios.interceptors.response.use(response => {
 // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
 // 否则的话抛出错误
 if (response.status === 200) {
 if (response.data.code === 511) {
  // 未授权调取授权接口
 } else if (response.data.code === 510) {
  // 未登录跳转登录页
 } else {
  return Promise.resolve(response)
 }
 } else {
 return Promise.reject(response)
 }
}, error => {
 // 我们可以在这里对异常状态作统一处理
 if (error.response.status) {
 // 处理请求失败的情况
 // 对不同返回码对相应处理
 return Promise.reject(error.response)
 }
})

get post的封装

httpGet: 一个参数是请求的url,一个就携带的请求参数,返回promise对象

// get 请求
export function httpGet({
 url,
 params = {}
}) {
 return new Promise((resolve, reject) => {
 axios.get(url, {
  params
 }).then((res) => {
  resolve(res.data)
 }).catch(err => {
  reject(err)
 })
 })
}

httpPost: 原理和get差不多,需要注意,这里多了个data参数,post请求提交前需要对它进行序列号操作,这里是通过transformRequest做处理;另外两个参数url,params和get请求的一样;

// post请求
export function httpPost({
 url,
 data = {},
 params = {}
}) {
 return new Promise((resolve, reject) => {
 axios({
  url,
  method: 'post',
  transformRequest: [function (data) {
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }],
  // 发送的数据
  data,
  // url参数
  params

 }).then(res => {
  resolve(res.data)
 })
 })
}

如何使用

我把所有的接口调用都在api.js文件中

先引入封装好的方法,再在要调用的接口重新封装成一个方法暴露出去

import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

在页面中可以这样调用:

// .vue
import { getorglist } from '@/assets/js/api'

getorglist({ id: 200 }).then(res => {
 console.log(res)
})

这样可以把api统一管理起来,以后维护修改只需要在api.js文件操作即可。

完整代码
最后贴上完整代码

// http.js
import axios from 'axios'

// 环境的切换
if (process.env.NODE_ENV === 'development') {
 axios.defaults.baseURL = '/proxyApi'
} else if (process.env.NODE_ENV === 'production') {
 axios.defaults.baseURL = 'http://prod.xxx.com'
}

// 请求拦截器
axios.interceptors.request.use(
 config => {
 token && (config.headers.Authorization = token)
 return config
 },
 error => {
 return Promise.error(error)
 })

axios.defaults.timeout = 10000

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 响应拦截器
axios.interceptors.response.use(response => {
 if (response.status === 200) {
 if (response.data.code === 511) {
  // 未授权调取授权接口
 } else if (response.data.code === 510) {
  // 未登录跳转登录页
 } else {
  return Promise.resolve(response)
 }
 } else {
 return Promise.reject(response)
 }
}, error => {
 // 我们可以在这里对异常状态作统一处理
 if (error.response.status) {
 // 处理请求失败的情况
 // 对不同返回码对相应处理
 return Promise.reject(error.response)
 }
})

// get 请求
export function httpGet({
 url,
 params = {}
}) {
 return new Promise((resolve, reject) => {
 axios.get(url, {
  params
 }).then((res) => {
  resolve(res.data)
 }).catch(err => {
  reject(err)
 })
 })
}

// post请求
export function httpPost({
 url,
 data = {},
 params = {}
}) {
 return new Promise((resolve, reject) => {
 axios({
  url,
  method: 'post',
  transformRequest: [function (data) {
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }],
  // 发送的数据
  data,
  // url参数
  params

 }).then(res => {
  resolve(res.data)
 })
 })
}
// api.js
import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

export const save = (data) => {
 return httpPost({
 url: 'apps/wechat/api/save_member',
 data
 })
}
// .vue
<script>
import { getorglist } from '@/assets/js/api'
export default {
 name: 'upload-card',
 data() {},
 mounted() {
 getorglist({ id: 200 }).then(res => {
  // console.log(res)
 })
 },
}
</script>

为什么还要多封装一层promise,不直接返回axios。
我在这里统一做个说明:
当然可以直接返回axios.get().then(res=>res.data),写法更简洁些;个人编程习惯,感觉resolve(res.data)写法更优雅些,这个就见仁见智了,所以正文对这点先做保留。这篇笔记也是提供一个思路,仅供参考。小伙伴可以根据自己实际业务需求来选择。

以上所述是小编给大家介绍的vue中axios请求的封装详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
使用taro开发微信小程序遇到的坑总结
Apr 08 #Javascript
vue+element+Java实现批量删除功能
Apr 08 #Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 #Javascript
You might like
初学CAKEPHP 基础教程
2009/11/02 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
奥运会口号
2014/06/13 职场文书
银行委托书范本
2014/09/28 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
工程移交协议书
2016/03/24 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis