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

 更新时间:2017年05月10日 14:35:57   作者:NowTheFuture  
本篇文章主要介绍了VUE 更好的 ajax 上传处理 axios.js实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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'
});

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

相关文章

  • vue配置多代理服务接口地址操作

    vue配置多代理服务接口地址操作

    这篇文章主要介绍了vue配置多代理服务接口地址操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 多页vue应用的单页面打包方法(内含打包模式的应用)

    多页vue应用的单页面打包方法(内含打包模式的应用)

    这篇文章主要介绍了多页vue应用的单页面打包方法(内含打包模式的应用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue3如何自定义js文件(插件或配置)

    vue3如何自定义js文件(插件或配置)

    这篇文章主要介绍了vue3如何自定义js文件(插件或配置),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 详解vue-cli3开发Chrome插件实践

    详解vue-cli3开发Chrome插件实践

    这篇文章主要介绍了vue-cli3开发Chrome插件实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue实现滑动拼图验证码功能

    Vue实现滑动拼图验证码功能

    这篇文章主要介绍了Vue实现滑动拼图验证码功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue组件和Route的生命周期实例详解

    Vue组件和Route的生命周期实例详解

    这篇文章主要介绍了Vue组件和Route的生命周期的相关知识,需要的朋友可以参考下
    2018-02-02
  • vue中路由router配置步骤详解

    vue中路由router配置步骤详解

    vue的主要思想是组件化开发,路由用来配置组件对应展示路径,本文给大家介绍vue中路由router配置步骤,创建路由文件——使用路由——配置路由出口,使路由配置内容展示在页面上,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • Vue自定义部分页面显示导航栏功能

    Vue自定义部分页面显示导航栏功能

    这篇文章主要介绍了Vue自定义部分页面显示导航栏,在设计导航栏的时候,考虑到登录之前不能浏览该网站,所以需要在登录页和注册页不能出现导航栏,登录后的页面才能出现导航栏,本文给大家解决这个问题,感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • 详解vue如何使用自定义指令

    详解vue如何使用自定义指令

    在Vue的模板语法中,我们学了很多指令,当然除了这些指令,Vue也允许我们自己定义自己的指令,所以本文就来和大家聊聊如何使用自定义指令吧
    2023-10-10
  • Vue实现美团app的影院推荐选座功能【推荐】

    Vue实现美团app的影院推荐选座功能【推荐】

    大家都经常使用美团app买电影票,很多朋友不知道她的功能是怎么实现的,作为我程序员一枚对它的算法很好奇,今天小编就把基于Vue实现美团app的影院推荐选座功能分享到脚本之家平台,感兴趣的朋友一起看看吧
    2018-08-08

最新评论