详解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作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 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
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
python中的reduce内建函数使用方法指南
2014/08/31 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
tensorflow的计算图总结
2020/01/12 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python实现人像动漫化的示例代码
2020/05/17 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
python链表类中获取元素实例方法
2021/02/23 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
大学生全国两会报告感想
2014/03/17 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
《风筝》教学反思
2016/02/23 职场文书
python实现学员管理系统(面向对象版)
2022/06/05 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python