Vue 中axios配置实例详解


Posted in Javascript onJuly 27, 2018

1.GET 请求

//向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 对象传递参数
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

2.POST请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

3执行多个并发请求

function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}));

4.请求配置

这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法,请求将默认为GET.

{  // `url`是将用于请求的服务器URL
  url: '/user',
  // `method`是发出请求时使用的请求方法
  method: 'get', // 默认
  // `baseURL`将被添加到`url`前面,除非`url`是绝对的。
  // 可以方便地为 axios 的实例设置`baseURL`,以便将相对 URL 传递给该实例的方法。
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest`允许在请求数据发送到服务器之前对其进行更改
  // 这只适用于请求方法'PUT','POST'和'PATCH'
  // 数组中的最后一个函数必须返回一个字符串,一个 ArrayBuffer或一个 Stream
  transformRequest: [function (data) {
  // 做任何你想要的数据转换
  return data;
  }],
  // `transformResponse`允许在 then / catch之前对响应数据进行更改
  transformResponse: [function (data) {
  // Do whatever you want to transform the data
  return data;
  }],
  // `headers`是要发送的自定义 headers
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params`是要与请求一起发送的URL参数
  // 必须是纯对象或URLSearchParams对象
  params: {
  ID: 12345
  },
  // `paramsSerializer`是一个可选的函数,负责序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
  return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data`是要作为请求主体发送的数据
  // 仅适用于请求方法“PUT”,“POST”和“PATCH”
  // 当没有设置`transformRequest`时,必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream
  data: {
  firstName: 'Fred'
  },
  // `timeout`指定请求超时之前的毫秒数。
  // 如果请求的时间超过'timeout',请求将被中止。
  timeout: 1000,
  // `withCredentials`指示是否跨站点访问控制请求
  // should be made using credentials
  withCredentials: false, // default
  // `adapter'允许自定义处理请求,这使得测试更容易。
  // 返回一个promise并提供一个有效的响应(参见[response docs](#response-api))
  adapter: function (config) {
  /* ... */
  },
  // `auth'表示应该使用 HTTP 基本认证,并提供凭据。
  // 这将设置一个`Authorization'头,覆盖任何现有的`Authorization'自定义头,使用`headers`设置。
  auth: {
  username: 'janedoe',
  password: 's00pers3cret'
  },
  // “responseType”表示服务器将响应的数据类型
  // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  // `onUploadProgress`允许处理上传的进度事件
  onUploadProgress: function (progressEvent) {
  // 使用本地 progress 事件做任何你想要做的
  },
  // `onDownloadProgress`允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
  // Do whatever you want with the native progress event
  },
  // `maxContentLength`定义允许的http响应内容的最大大小
  maxContentLength: 2000,
  // `validateStatus`定义是否解析或拒绝给定的promise
  // HTTP响应状态码。如果`validateStatus`返回`true`(或被设置为`null` promise将被解析;否则,promise将被
   // 拒绝。
  validateStatus: function (status) {
  return status >= 200 && status < 300; // default
  },
  // `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
  // 如果设置为0,则不会遵循重定向。
  maxRedirects: 5, // 默认
  // `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
  // 允许配置类似`keepAlive`的选项,
  // 默认情况下不启用。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy'定义代理服务器的主机名和端口
  // `auth`表示HTTP Basic auth应该用于连接到代理,并提供credentials。
  // 这将设置一个`Proxy-Authorization` header,覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
  proxy: {
  host: '127.0.0.1',
  port: 9000,
  auth: : {
  username: 'mikeymike',
  password: 'rapunz3l'
  }
  },
  // “cancelToken”指定可用于取消请求的取消令牌
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
 }

5.全局axios默认值

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

6.拦截器

你可以截取请求或响应在被 then 或者 catch 处理之前

//添加请求拦截器<==>请求发起前做的事
axios.interceptors.request.use(function(config){
   //在发送请求之前做某事
   return config;
  },function(error){
   //请求错误时做些事
   return Promise.reject(error);
  });
//添加响应拦截器<==>响应回来后做的事
axios.interceptors.response.use(function(response){
   //对响应数据做些事
   return response;
  },function(error){
   //请求错误时做些事
   return Promise.reject(error);
  });

   如果你以后可能需要删除拦截器。、

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
  axios.interceptors.request.eject(myInterceptor);

    你可以将拦截器添加到axios的自定义实例

var instance = axios.create();
  instance.interceptors.request.use(function () {/*...*/});

总结

以上所述是小编给大家介绍的Vue 中axios配置实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解JavaScript的变量的入门教程
Jul 07 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
js实现倒计时关键代码
May 05 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 #Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 #Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 #Javascript
JavaScript事件对象event用法分析
Jul 27 #Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 #Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 #Javascript
浅谈Redux中间件的实践
Jul 27 #Javascript
You might like
Array of country list in PHP with Zend Framework
2011/10/17 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
python方向键控制上下左右代码
2018/01/20 Python
python最长回文串算法
2018/06/04 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
django 消息框架 message使用详解
2019/07/22 Python
python 实现多线程下载视频的代码
2019/11/15 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
优秀的计算机专业求职信范文
2013/12/27 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
公司庆典欢迎词
2015/01/26 职场文书
2014年终个人总结报告
2015/03/09 职场文书
党员发展大会主持词
2015/07/03 职场文书
学生会部长竞选稿
2015/11/19 职场文书
Python中for后接else的语法使用
2021/05/18 Python
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
进行数据处理的6个 Python 代码块分享
2022/04/06 Python