Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
Github开源地址: https://github.com/axios/axios
安装方法
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
或
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 yarn:
$ yarn add axios
浏览器支持情况
GET 方法
我们可以简单的读取 JSON 数据:
GET 实例
尝试一下 »
使用 response.data 读取 JSON 数据:
GET 实例
尝试一下 »
GET 方法传递参数格式如下:
传递参数说明
POST 方法
POST 实例
尝试一下 »
POST 方法传递参数格式如下:
传递参数说明
执行多个并发请求
实例
axios API
可以通过向 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]])
注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
并发
处理并发请求的助手函数:
axios.all(iterable) axios.spread(callback)
创建实例
可以使用自定义配置新建一个 axios 实例:
axios.create([config]) const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} });
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并:
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]])
请求配置项
下面是创建请求时可用的配置选项,注意只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。
{// `url` 是用于请求的服务器 URLurl: "/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) {
转载于:https://www.cnblogs.com/Jeely/p/11230818.html
Vue.js Ajax(axios)相关推荐
- vue中Ajax(axios)及Ajax(vue-resource)的使用方法
目录 Vue.js Ajax(axios) GET 方法 请求方法的别名 并发 请求配置项 响应结
- modal ajax,在Modal中调用Vue.js AJAX
我正在尝试弹出一个信用卡详细信息的模式.详细信息来自AJAX请求.由于某种原因,根Vue实例正在更新,但组件实例不是.这就是我目前所拥有的 - HTML: × View Card Details Cl ...
- vue根据url获取内容axios_使用Vue.js和Axios从第三方API获取数据 — SitePoint
更多的往往不是,建立你的JavaScript应用程序时,你会想把数据从远程源或消耗一个[ API ](https:/ /恩.维基百科.org /维基/ application_programming_ ...
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...
data里面做了定义 在方法里面进行赋值 用 this.info = repos.data 数据可以请求到,但是会报错 TypeError: Cannot set property 'listgrou ...
- vue.js 使用axios实现下载功能
本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦 只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因 浏览器的GET(fr ...
- 前端Vue.js框架是什么?有哪些特点?
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
- vue 中使用axios
1.Vue.js Ajax(axios) Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node ...
- (私人收藏)Vue.js手册及教程
(私人收藏)Vue.js手册及教程 https://pan.baidu.com/s/1XG1XdbbdBQm7cyhQKUIrRQ 5lrt Vue.js手册及教程Vue.js 教程Vue.js 安装 ...
- axios java 参数,vue.js axios发请求时,参数包括dto和一个flag, 后台如何接?
1.vue.js使用axios向后台发请求. 传递参数中包含一个object,一个string. object到后台用javaBean接, String到后台用String接. 2.前台代码遇新是直朋 ...
- js处理请求最多的服务器,vue.js 请求服务器
理解vue ssr原理,自己搭建简单的ssr框架 先附上demo地址:https://github.com/wmui/vue-s... 第一步:编写entry-client.js和entry-serv ...
最新文章
- 《从零开始学Swift》学习笔记(Day 65)——Cocoa Touch设计模式及应用之选择器
- 让Windows下的Tomcat将控制台信息记录到日志
- java 静态方法和实例方法的区别
- 【每周CV论文】初学GAN图像风格化必须要读的文章
- c语言多种选,教你轻松学会C语言系列之——一种更简洁、更经典的选择结构
- left join缺失右括号_LeetCode刷题实战31:最长有效括号
- 《机器学习实战》配套代码下载
- 市场部和销售部的区别
- 【渝粤教育】国家开放大学2019年春季 45烹饪原料学(1) 参考试题
- 从 JVM 层面理解 i++ 和 ++i 的真正区别!
- 推荐一个在线视频学习、在线试题练习、在线同步考试开源系统
- Axure动态显示实时时间
- 在开发IE插件时,遇到的各种问题记录
- win7网络不显示共享计算机,Win7电脑已开启共享却找不到设备 局域网显示空白该怎么解决...
- MATLAB中wcp什么意思,WCP是什么意思
- 下载到的电子书格式是Mobi,这种格式能否在手机上打开?
- VC++各种文件作用
- Linux 解压缩文件到指定目录
- 静态成员和非静态成员的区别是什么?
- fedora 25 安装字体