VUE 更好的 ajax 上传处理 axios.js实现代码


Posted in Javascript onMay 10, 2017

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法。

首先就是引入axios,如果你使用es6,只需要安装axios模块之后

import axios from 'axios';
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios提供了一下几种请求方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项

//config
import Qs from 'qs'
{
 //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url
 url: '/user',

 // 请求方法同上
 method: 'get', // default
 // 基础url前缀
 baseURL: 'https://some-domain.com/api/',




 transformRequest: [function (data) {
  // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装)

data = Qs.stringify({});
  return data;
 }],

 transformResponse: [function (data) {
  // 这里提前处理返回的数据

  return data;
 }],

 // 请求头信息
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 //parameter参数
 params: {
  ID: 12345
 },

 //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错
 data: {
  firstName: 'Fred'
 },

 //设置超时时间
 timeout: 1000,
 //返回数据类型
 responseType: 'json', // default


}

有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用

axios.post(url,{},config)
  .then(function(res){
    console.log(res);
  })
  .catch(function(err){
    console.log(err);
  })
//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。
//下面是关于同时发起多个请求时的处理

axios.all([get1(), get2()])
 .then(axios.spread(function (res1, res2) {
  // 只有两个请求都完成才会成功,否则会被catch捕获
 }));

最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

//当然还可以这么配置
var instance = axios.create({
 baseURL: 'https://api.example.com'
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue+echarts实现多条折线图
Mar 21 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vuejs2.0子组件改变父组件的数据实例
May 10 #Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 #Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 #Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
You might like
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php检测文件编码的方法示例
2014/04/25 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Js组件的一些写法
2010/09/10 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python版微信红包分配算法
2015/05/04 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
10个顶级Python实用库推荐
2021/03/04 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
产品包装策划方案
2014/05/18 职场文书
好好学习保证书
2015/02/26 职场文书
四年级语文教学反思
2016/03/03 职场文书