详解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初学者的编写开发的七个细节
Jan 11 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 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 Calender(日历)代码分享
2014/01/03 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
Python新手学习raise用法
2020/06/03 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
教师求职自荐信
2014/03/09 职场文书
校园文明标语
2014/06/13 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
阿甘正传观后感
2015/06/01 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
python 模块重载的五种方法
2021/04/24 Python