详解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 相关文章推荐
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Python os模块介绍
2014/11/30 Python
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python中requests模块的使用方法
2015/04/08 Python
Python切片知识解析
2016/03/06 Python
Python编写登陆接口的方法
2017/07/10 Python
实例讲解Python3中abs()函数
2019/02/19 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
党员自我批评与反省材料
2014/02/10 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python