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 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
python3.0 字典key排序
2008/12/24 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
Python实现微信机器人的方法
2019/09/06 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
抽象类和接口的区别
2012/09/19 面试题
毕业生自我推荐
2013/11/04 职场文书
给面试官的感谢信
2014/02/01 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL