详解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注入技巧
Jun 22 Javascript
用js实现随机返回数组的一个元素
Aug 13 Javascript
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 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
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Django框架 信号调度原理解析
2019/09/04 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python常量折叠基础知识点讲解
2021/02/28 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
社区禁毒工作方案
2014/06/02 职场文书
抗洪救灾标语
2014/10/08 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
思想政治表现评语
2015/01/04 职场文书
简历中自我评价范文
2015/03/11 职场文书
Vue实现动态查询规则生成组件
2021/05/27 Vue.js
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python数据类型最全知识总结
2021/05/31 Python
Python pandas求方差和标准差的方法实例
2021/08/04 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript