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 相关文章推荐
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
vue.js的安装方法
May 12 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python学生管理系统学习笔记
2019/03/19 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
药学专业大学生个人的自我评价
2013/11/04 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
运动会开幕词
2015/01/28 职场文书
家装电话营销开场白
2015/05/29 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
css弧边选项卡的项目实践
2023/05/07 HTML / CSS