详解axios在vue中的简单配置与使用


Posted in Javascript onMay 10, 2017

一、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

二、引入方式:

npm:

$ npm install axios
//淘宝源
$ cnpm install axios

bower:

$ bower install axios

cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、vue中axios的配置

之前那个开源项目一开始就打算用axios,在网上找了好多文章与攻略,发现好多都不太详细,所以打算自己动手配置一个,(不要怂,撸起袖子就是干)。

我的配置:

import axios from 'axios'
import qs from 'qs'
import * as _ from '../util/tool'
axios.defaults.timeout = 5000;            //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';      //配置请求头
axios.defaults.baseURL = '你的接口地址';  //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
 //在发送请求之前做某件事
  if(config.method === 'post'){
    config.data = qs.stringify(config.data);
  }
  return config;
},(error) =>{
   _.toast("错误的传参", 'fail');
  return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
 //对响应数据做些事
  if(!res.data.success){
    // _.toast(res.data.msg);
    return Promise.reject(res);
  }
  return res;
}, (error) => {
  _.toast("网络异常", 'fail');
  return Promise.reject(error);
});
//返回一个Promise(发送post请求)
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err);
      })
      .catch((error) => {
        reject(error)
      })
  })
}

四、vue中使用配置好的axios

export default {
  /**
   * 用户登录
   */
  Login(params) {
    return fetch('/users/api/userLogin', params)
  }, 
  /**
   * 用户注册
   */
  Regist(params) {
    return fetch('/users/api/userRegist', params)
  },
  /**
   * 发送注册验证码
   */
  RegistVerifiCode(tellphone) {
    return fetch('/users/api/registVerifiCode', {tellphone: tellphone})
  },
  ......
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
babel基本使用详解
Feb 17 Javascript
如何编写jquery插件
Mar 29 jQuery
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
JavaScript实现form表单的多文件上传
Mar 27 #Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 #Javascript
利用PM2部署node.js项目的方法教程
May 10 #Javascript
全面解析vue中的数据双向绑定
May 10 #Javascript
利用forever和pm2部署node.js项目过程
May 10 #Javascript
javascript简单链式调用案例分析
May 10 #Javascript
You might like
上海无线电三厂简史修改版
2021/03/01 无线电
消息持续发送的完整例子
2006/10/09 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
Python写的一个简单监控系统
2015/06/19 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
浅析Django中关于session的使用
2019/12/30 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
电气自动化大学生求职信
2013/10/16 职场文书
在校实习生求职信
2014/06/18 职场文书
环保志愿者活动总结
2014/06/27 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
股东出资证明书范例
2014/10/04 职场文书
读书笔记格式
2015/07/02 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Python 多线程处理任务实例
2021/11/07 Python
详解Python如何批量采集京东商品数据流程
2022/01/22 Python