vue中axios请求的封装实例代码


Posted in Javascript onMarch 23, 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) {
 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) {
 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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 #Javascript
浅谈Angular单元测试总结
Mar 22 #Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 #Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 #Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 #Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 #Javascript
如何从零开始手写Koa2框架
Mar 22 #Javascript
You might like
构建简单的Webmail系统
2006/10/09 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
纯js实现背景图片切换效果代码
2010/11/14 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python中一些深不见底的“坑”
2019/06/12 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
基于python中__add__函数的用法
2019/11/25 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
python热力图实现简单方法
2021/01/29 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
《社戏》教学反思
2014/04/15 职场文书
促销活动总结报告
2014/04/26 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP