详解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 setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
vue 虚拟DOM的原理
Oct 03 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-FPM进程池探秘
2017/10/17 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
python编写爬虫小程序
2015/05/14 Python
Python celery原理及运行流程解析
2020/06/13 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
中央空调节能方案
2014/06/15 职场文书
重点工程汇报材料
2014/08/27 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
教代会开幕词
2015/01/28 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
学前班教学反思
2016/02/24 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android