详解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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 Javascript
使用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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
php随机显示图片的简单示例
2014/02/15 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python网络编程实例简析
2014/09/26 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
承兑汇票延期证明
2015/06/23 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
MYSQL如何查看操作日志详解
2022/05/30 MySQL