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 相关文章推荐
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
javascript变量声明实例分析
Apr 25 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
js生成word中图片处理方法
Jan 06 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
node.js域名解析实现方法详解
Nov 05 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
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
javascript json2 使用方法
2010/03/16 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python中django学习心得
2017/12/06 Python
Python调用服务接口的实例
2019/01/03 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
家属答谢词
2015/01/05 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
JavaScript实现登录窗体
2021/06/22 Javascript
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Docker安装MySql8并远程访问的实现
2022/07/07 Servers