vue使用Axios做ajax请求详解


Posted in Javascript onJune 07, 2017

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios

1. 安装 axios

$ npm install axios

$ bower install axios

2. 在要使用的文件中引入axios

import axios from 'axios'

3. 使用axios做请求

可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

{
 // `url` 是用于请求的服务器 URL
 url: '/user',

 // `method` 是创建请求时使用的方法
 method: 'get', // 默认是 get

 // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
 // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
 baseURL: 'https://some-domain.com/api/',

 // `transformRequest` 允许在向服务器发送前,修改请求数据
 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
 // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
 transformRequest: [function (data) {
  // 对 data 进行任意转换处理

  return data;
 }],

 // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
 transformResponse: [function (data) {
  // 对 data 进行任意转换处理

  return data;
 }],

 // `headers` 是即将被发送的自定义请求头
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 // `params` 是即将与请求一起发送的 URL 参数
 // 必须是一个无格式对象(plain object)或 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
 // - 浏览器专属:FormData, File, Blob
 // - Node 专属: Stream
 data: {
  firstName: 'Fred'
 },

 // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
 // 如果请求话费了超过 `timeout` 的时间,请求将被中断
 timeout: 1000,

 // `withCredentials` 表示跨域请求时是否需要使用凭证
 withCredentials: false, // 默认的

 // `adapter` 允许自定义处理请求,以使测试更轻松
 // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
 adapter: function (config) {
  /* ... */
 },

 // `auth` 表示应该使用 HTTP 基础验证,并提供凭据
 // 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
 auth: {
  username: 'janedoe',
  password: 's00pers3cret'
 },

 // `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
 responseType: 'json', // 默认的

 // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
 xsrfCookieName: 'XSRF-TOKEN', // default

 // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
 xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的

 // `onUploadProgress` 允许为上传处理进度事件
 onUploadProgress: function (progressEvent) {
  // 对原生进度事件的处理
 },

 // `onDownloadProgress` 允许为下载处理进度事件
 onDownloadProgress: function (progressEvent) {
  // 对原生进度事件的处理
 },

 // `maxContentLength` 定义允许的响应内容的最大尺寸
 maxContentLength: 2000,

 // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte
 validateStatus: function (status) {
  return status >= 200 && status < 300; // 默认的
 },

 // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
 // 如果设置为0,将不会 follow 任何重定向
 maxRedirects: 5, // 默认的

 // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:
 // `keepAlive` 默认没有启用
 httpAgent: new http.Agent({ keepAlive: true }),
 httpsAgent: new https.Agent({ keepAlive: true }),

 // 'proxy' 定义代理服务器的主机名称和端口
 // `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据
 // 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
 proxy: {
  host: '127.0.0.1',
  port: 9000,
  auth: : {
   username: 'mikeymike',
   password: 'rapunz3l'
  }
 },

 // `cancelToken` 指定用于取消请求的 cancel token
 cancelToken: new CancelToken(function (cancel) {
 })
}

为方便,所有支持的请求方法都提供了别名:

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]])

4. 请求的响应结构

{
 // `data` 由服务器提供的响应
 data: {},

 // `status` 来自服务器响应的 HTTP 状态码
 status: 200,

 // `statusText` 来自服务器响应的 HTTP 状态信息
 statusText: 'OK',

 // `headers` 服务器响应的头
 headers: {},

 // `config` 是为请求提供的配置信息
 config: {}
}

使用 then 时,你将接收下面这样的响应:

axios.get('/user/12345')
 .then(function(response) {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
 });

在使用 catch 时,响应可以通过 error 对象可被使用

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

5. 使用实例

el1: get请求

axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

el2: post请求

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

el3: 执行多个并发请求

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) {
  // 两个请求现在都执行完成
 }));

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

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 #Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 #Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 #Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 #Javascript
详解Vue 开发模式下跨域问题
Jun 06 #Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 #Javascript
深入理解vue-loader如何使用
Jun 06 #Javascript
You might like
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
Jquery cookie操作代码
2010/03/14 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python实现分页效果
2017/10/25 Python
将python图片转为二进制文本的实例
2019/01/24 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Django中session进行权限管理的使用
2021/07/09 Python
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android