详解Vue中Axios封装API接口的思路及方法


Posted in Javascript onOctober 10, 2020

一、axios的封装

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余。

安装

> npm install axios //这个就是安装axios的命令

首先我们要现在项目中安装Axios组件,这一步是一定的。

下载好了以后,就在项目的src文件里再新建两个目录,一个是http,一个是api。http目录是用来封装Axios的,api目录是用来统一来管理我们的接口的。

引入

第一步,先要在http.js里面引入axios

import axios from 'axios'

环境的切换

在我们开发项目的时候会有多种环境,就比如开发环境、测试环境、生产环境,使用axios.defaults.baseURL可以设置axios的默认请求地址。

//在开发环境中的测试 development
if(process.env.NODE_ENV == 'development') {
 axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
//在生产环境中的测试 production
if(process.env.NODE_ENV == 'production') {
 axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
//还有一种环境 debug

设置响应超时时间

通过axios.defaults.timeout设置默认的请求超时时间。如果超出了响应时间,就会告知用户当前请求超时,请刷新等等

//响应超时的时间
axios.defaults.timeout = 5000;

设置接口请求拦截

//接口请求拦截
axios.interceptors.request.use(
 config => {
 config.headers = { DeviceType : 'H5' } //设置响应头部
 return config
 }
)

使用promise返回axios请求的结果

post :

export function get(url,params){
 return new Promise((resolve,reject) => {
 axios.get(url,{
  params : params
 }).then(res => {
  resolve(res)
 }).catch(err => {
  reject(err)
 })
 })
}

get :

export function post(url,params){
 return new Promise((resolve,reject) => {
 axios.post(url,params)
 .then(res => {
  resolve(res.data)
 })
 .catch(err => {
  reject(err.data)
 })
 })
}

这个时候,http.js里面的就写好了。下面就要去api.js去获取api接口了。

现在是api.js中的内容

首先是要在api.js中引入刚刚封装好的axios

import {get,post} from '../http/http.js'
//get post 同时都要引入

然后就可以根据接口文档来进行数据的获取啦

//封装接口的方法
export function getAppIndex() {
 return get('api/app/recommend/appIndex')
}

export function getBanner() {
 return get('api/app/banner')
}

export function getTel() {
 return post('api/app/smsCode',{
  //这里用的是params传参,直接写{}就可,不用再声明params啦
  mobile : 18567391972,
  sms_type : 'login'
 })
}

再再然后,就可以去vue页面通过生命周期来获取数据啦。

再再再注意,这里不一定一定要使用async函数,这只是其中一种方法啦

async mounted() {
  // 明星讲师、精品课程等等
  let res = await getAppIndex();
  
  //添加到数组
  this.startList = res.data.data.list
  
  // 轮播图列表
  var banner = await getBanner();
  // console.log('轮播图'+ banner)
  if (banner.data.code == 200) {
  this.bannerList = banner.data.data
  }

  // 手机验证码接口
  let Tel = await getTel();
  // console.log('手机验证码'+ Tel)

  //
 },

到此这篇关于详解Vue中Axios封装API接口的思路及方法的文章就介绍到这了,更多相关Vue Axios封装API接口内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
window.open()弹出居中的窗口
Feb 01 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
浅谈JavaScript之事件绑定
Jul 08 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 #Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 #Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 #jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 #Javascript
vue实现选中效果
Oct 07 #Javascript
electron踩坑之dialog中的callback解决
Oct 06 #Javascript
electron踩坑之remote of undefined的解决
Oct 06 #Javascript
You might like
JavaScript效率调优经验
2009/06/04 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
想学画画?python满足你!
2020/12/24 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
HTML5自定义属性的问题分析
2019/08/16 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
个人求职信范文分享
2014/01/31 职场文书
2014年妇联工作总结
2014/11/21 职场文书
班主任先进事迹材料
2014/12/17 职场文书
医学生自荐信范文
2015/03/05 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
2015年售票员工作总结
2015/04/29 职场文书
五年级作文之劳动作文
2019/11/12 职场文书