Vue 中怎么发起请求(一)
1、vue 支持开发者引入 jquery 使用 $.ajax()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
1、首先,在 package .json 中添加 jQuery,然后 npm install "dependencies" : { "jquery" : "^3.2.1" , }, 2、在 webpack.config.js ( 这边用的 vue-cli-simple 脚手架 ) // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery" , jQuery: "jquery" }) ], 3、最后,在全局(main.js)中去引用 import $ from 'jquery' |
2、vue.resource( 2.0后不再更新)
1
2
3
4
5
6
7
8
9
10
11
12
|
1、 npm 安装 vue-resource npm install vue-resource<br> 2、 main.js 中引入 import VueResource from 'vue-resource' Vue.use(VueResource)<br> 3、使用 this .$http.get( '../src/data/a.txt' ) .then( function (res){ alert(res.data); }, function (){ alert( 'false' ) }); |
3、推荐使用 axios
1
2
3
4
5
6
7
8
9
10
11
12
|
//url :绝对路径 //1、npm 安装 npm install axios //2、组件 中引入main.js引入 import axios from 'axios' Vue.prototype.$http = axios //组件中使用: this .$http.post() |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
--------------------------------------------------------- main.js引入 迭代补进来的 import Axios from 'axios' // 配置请求信息 var $http = Axios.create({ baseURL: '请求路径' , timeout: '3000' , //请求超时时间 headers: { 'X-Custom-Header' : 'foobar' } //header传值,例如:Authorization }) Vue.prototype.$http = $http 组件中使用: this .$http.post() ---------------------------------------------------------- |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
3、使用 this .$http.get( 'url' ) .then( function (res){ alert(res); }) . catch ( function (err){ alert(err); }) this .$http.post( 'url' , { firstName: 'Fred' , lastName: 'Flintstone' }) .then( function (response) { console.log(response); }) . catch ( function (error) { console.log(error); }); |
axios详细配置信息如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
{ // `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 // (查看后面的 Cancellation 这节了解更多) cancelToken: new CancelToken( function (cancel) { }) } |
Vue 中怎么发起请求(一)的更多相关文章
- Vue 中怎么发起请求(二)
fetch 是新一代XMLHttpRequest的一种替代方案.无需安装其他库.可以在浏览器中直接提供其提供的api轻松与后台进行数据交互. 基本用法: 1 fetch(url,{parmas}).t ...
- vue中比较完美请求的栗子(使用 axios 访问 API)
vue中比较完美请求的栗子(使用 axios 访问 API) 官网地址:https://vuejs.bootcss.com/v2/cookbook/using-axios-to-consume-api ...
- Vue中axios有关请求头的几点小结
在Vue前端中向后端发起http请求会有着两种写法:一种是在vue文件中直接导入axios模板,另外一种是使用Vue的属性$http. 1.在第一种方式中,在同一个工程中所添加的vue文件直接使用ax ...
- vue axios配置 发起请求加载loading请求结束关闭loading
axios带有请求拦截器,避免在每个请求里面加loading重复操作,可以封装进去,在请求开始时加载loading层,请求结束关闭,loading层用vux的loading加载 axios.js im ...
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue 中使用 axios 请求接口,请求会发送两次问题
在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...
- Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档 https://githu ...
- vue 中promise 异步请求数据
export function getTypes(type) { return listDictItems({ code: type }).then((res) => { if (res.cod ...
随机推荐
- SQl Server 函数篇 数学函数,字符串函数,转换函数,时间日期函数
数据库中的函数和c#中的函数很相似 按顺序来, 这里价格特别的 print 可以再消息栏里打印东西 数学函数 ceiling() 取上限 不在乎小数点后面有多大,直接忽略 floor() ...
- 771. Jewels and Stones珠宝数组和石头数组中的字母对应
[抄题]: You're given strings J representing the types of stones that are jewels, and S representing th ...
- 如何使CPU占用率为50%
在Linux下,CPU的状态分为系统态,用户态和空闲态,分别指系统内核执行时间,处于用户态的时间和空闲系统进程执行的时间.三者之和就是CPU的总时间. CPU的利用率就是非空闲进程占用时间的比例. 1 ...
- Qemu虚拟机 玩树莓派最新版系统 (截止2017-04-10)
Qemu虚拟机可以玩 树莓派,大家都知道了吧.可是网上的教程好老,都是2012年的.我按照教程下载了最新版版本的树莓派系统怎么也跑不起来. 研究了好久,终于找到一个简单的方法,特意分享出来.转载请注意 ...
- java线程安全的元素
集合类: Vector Stack HashTable enumeration 字符串: StringBuffer
- serializeArray()和.serialize()的区别、联系
serializeArray()和.serialize()的区别.联系 <form id='addForm' action='UserAdd.action' type='post'> ...
- DiscreteFrechetDist
计算离散的frechet 距离,通过计算两条曲线之间的点的距离,将两条曲线上的点按照距离以及曲线的趋势进行配对,最后根据这些配对的距离选出最后的离散frechet距离(compute discrete ...
- 自动化打包资源混淆集成python实践----资源混淆
前面自动化打包资源混淆集成python实践----打包一文讲述了四种打包方案,以及美团打包方案.apk注释添加渠道号方案的实现.这里讲集成资源混淆. 1.资源混淆带来的好处: 1)对资源文件起一定的保 ...
- maven tomcat:run指定tomcat7:
配置好下面的内容后,执行 run as -> tomcat7:run 或者tomcat6:run可以将maven的web应用在tomcat6/7里面运行 ,eclipse Indigo 版本默认 ...
- Java50道经典习题-程序45 被9整除
题目:判断一个素数能被几个9整除分析:素数只能被1和其本身整除,不能被9整除,所以返回false import java.util.Scanner; public class Prog45{ publ ...