详解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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
Uploadify上传文件方法
Mar 16 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php中的登陆login实例代码
2016/06/20 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
13个PHP函数超实用
2015/10/21 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python django事务transaction源码分析详解
2017/03/17 Python
Python闭包函数定义与用法分析
2018/07/20 Python
Flask之flask-session的具体使用
2018/07/26 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
美术国培研修感言
2014/02/12 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书