Vue.js教程之axios与网络传输的学习实践


Posted in Javascript onApril 29, 2017

前言

在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。就学习尤大推荐的axios了。刚好本人对网络请求这块除了会get、put、post和delete这四个方法之外知之甚少,刚好补全上。

注意:Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios。

为何放弃vue-resource?

尤大的原话:

最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用,但以后不再把 vue-resource 作为官方的 ajax 方案。

axios安装

npm:

$ npm install axios

bower:

$ bower install axios

Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本使用方法

GET请求

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
 .then(function (response) {
 console.log(response);
 })
 .catch(function (error) {
 console.log(error);
 });

// Optionally the request above could also be done as
axios.get('/user', {
 params: {
 ID: 12345
 }
 })
 .then(function (response) {
 console.log(response);
 })
 .catch(function (error) {
 console.log(error);
 });

POST请求

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

同时执行多个请求

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) {
 // Both requests are now complete
 }));

其实和其他的ajax库一样,基本用法都是差不多的。大家一看就知道怎么用。

axios API

可以直接通过config来完成请求

axios(config)

axios({
 method: 'post',
 url: '/user/12345',
 data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
 }
});

axios(url, [config])

// Send a GET request (default method)
axios('/user/12345');

请求方法别名

下面是axios支持的所有请求方法别名,便于各种请求。

注: [...]中的数据表示可以为空。url是ajax请求地址;data是提交的数据对象;config是配置对象,所有ajax配置都可以在config中实现。

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

并发性

下列接口用于处理并发请求(同时处理多个多个request)

  • axios.all(iterable)
  • axios.spread(callback)

axios实例

可以用自定义的config创建一个axios实例

axios.create([config])

var instance = axios.create({
 baseURL: 'https://some-domain.com/api/',
 timeout: 1000,
 headers: {'X-Custom-Header': 'foobar'}
});

实例方法

下面是实例的所有可用方法,方法中的config会与axios实例中的config合并。(实例可以将一些通用的config先配置好)

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

Config

重点来了,来看看Config。

下面列出了config的所有配置项,其中之后url是必填的。当method没有指定方法,默认为GET。

{
 // `url` is the server URL that will be used for the request
 // 用来向服务器发送请求的url
 url: '/user',

 // `method` is the request method to be used when making the request
 // 请求方法
 method: 'get', // default

 // `baseURL` will be prepended to `url` unless `url` is absolute.
 // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
 // to methods of that instance.
 // 假如`url`不是绝对路径,那么向服务器发送请求的URL将是`baseURL + url`
 baseURL: 'https://some-domain.com/api/',

 // `transformRequest` allows changes to the request data before it is sent to the server
 // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
 // The last function in the array must return a string, an ArrayBuffer, or a Stream
 transformRequest: [function (data) {
 // Do whatever you want to transform the data

 return data;
 }],

 // `transformResponse` allows changes to the response data to be made before
 // it is passed to then/catch
 transformResponse: [function (data) {
 // Do whatever you want to transform the data

 return data;
 }],

 // `headers` are custom headers to be sent
 headers: {'X-Requested-With': 'XMLHttpRequest'},

 // `params` are the URL parameters to be sent with the request
 // Must be a plain object or a URLSearchParams object
 params: {
 ID: 12345
 },

 // `paramsSerializer` is an optional function in charge of serializing `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` is the data to be sent as the request body
 // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
 // When no `transformRequest` is set, must be of one of the following types:
 // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
 // - Browser only: FormData, File, Blob
 // - Node only: Stream
 data: {
 firstName: 'Fred'
 },

 // `timeout` specifies the number of milliseconds before the request times out.
 // If the request takes longer than `timeout`, the request will be aborted.
 timeout: 1000,

 // `withCredentials` indicates whether or not cross-site Access-Control requests
 // should be made using credentials
 withCredentials: false, // default

 // `adapter` allows custom handling of requests which makes testing easier.
 // Return a promise and supply a valid response (see [response docs](#response-api)).
 adapter: function (config) {
 /* ... */
 },

 // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
 // This will set an `Authorization` header, overwriting any existing
 // `Authorization` custom headers you have set using `headers`.
 auth: {
 username: 'janedoe',
 password: 's00pers3cret'
 },

 // `responseType` indicates the type of data that the server will respond with
 // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
 responseType: 'json', // default

 // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
 xsrfCookieName: 'XSRF-TOKEN', // default

 // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
 xsrfHeaderName: 'X-XSRF-TOKEN', // default

 // `onUploadProgress` allows handling of progress events for uploads
 onUploadProgress: function (progressEvent) {
 // Do whatever you want with the native progress event
 },

 // `onDownloadProgress` allows handling of progress events for downloads
 onDownloadProgress: function (progressEvent) {
 // Do whatever you want with the native progress event
 },

 // `maxContentLength` defines the max size of the http response content allowed
 maxContentLength: 2000,

 // `validateStatus` defines whether to resolve or reject the promise for a given
 // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
 // or `undefined`), the promise will be resolved; otherwise, the promise will be
 // rejected.
 validateStatus: function (status) {
 return status >= 200 && status < 300; // default
 },

 // `maxRedirects` defines the maximum number of redirects to follow in node.js.
 // If set to 0, no redirects will be followed.
 maxRedirects: 5, // default

 // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
 // and https requests, respectively, in node.js. This allows to configure options like
 // `keepAlive` that are not enabled by default.
 httpAgent: new http.Agent({ keepAlive: true }),
 httpsAgent: new https.Agent({ keepAlive: true }),

 // 'proxy' defines the hostname and port of the proxy server
 // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and supplies credentials.
 // This will set an `Proxy-Authorization` header, overwriting any existing `Proxy-Authorization` custom headers you have set using `headers`.
 proxy: {
 host: '127.0.0.1',
 port: 9000,
 auth: : {
 username: 'mikeymike',
 password: 'rapunz3l'
 }
 },

 // `cancelToken` specifies a cancel token that can be used to cancel the request
 // (see Cancellation section below for details)
 cancelToken: new CancelToken(function (cancel) {
 })
}

分析Config

配置参数很多,我们一个一个来了解它们

  • url —— 用来向服务器发送请求的url
  • method —— 请求方法,默认是GET方法
  • baseURL —— 基础URL路径,假如url不是绝对路径,如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。
  • transformRequest —— transformRequest方法允许在请求发送到服务器之前修改该请求,此方法只适用于PUT、POST和PATCH方法中。而且,此方法最后必须返回一个string、ArrayBuffer或者Stream。
  • transformResponse —— transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。
  • headers —— 发送自定义Headers头文件,头文件中包含了http请求的各种信息。
  • params —— params是发送请求的查询参数对象,对象中的数据会被拼接成url?param1=value1¶m2=value2。
  • paramsSerializer —— params参数序列化器。
  • data —— data是在发送POST、PUT或者PATCH请求的数据对象。
  • timeout —— 请求超时设置,单位为毫秒
  • withCredentials —— 表明是否有跨域请求需要用到证书
  • adapter —— adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的response
  • auth —— auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。
  • responseType —— 表示服务器将返回响应的数据类型,有arraybuffer、blob、document、json、text、stream这6个类型,默认是json类似数据。
  • xsrfCookieName —— 用作 xsrf token 值的 cookie 名称
  • xsrfHeaderName —— 带有 xsrf token 值 http head 名称
  • onUploadProgress —— 允许在上传过程中的做一些操作
  • onDownloadProgress —— 允许在下载过程中的做一些操作
  • maxContentLength —— 定义了接收到的response响应数据的最大长度。
  • validateStatus —— validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果 validateStatus 返回 true (或设置为 null 或 undefined ),promise将被接收;否则,promise将被拒绝。
  • maxRedirects —— maxRedirects定义了在node.js中redirect的最大值,如果设置为0,则没有redirect。
  • httpAgent —— 定义在使用http请求时的代理
  • httpsAgent —— 定义在使用https请求时的代理
  • proxy —— proxy定义代理服务器的主机名和端口,auth
  • cancelToken —— cancelToken定义一个 cancel token 用于取消请求

Response

当我们ajax获取数据成功后会返回一个response对象,它包含了以下内容:

{
 // `data` is the response that was provided by the server
 data: {},

 // `status` is the HTTP status code from the server response
 status: 200,

 // `statusText` is the HTTP status message from the server response
 statusText: 'OK',

 // `headers` the headers that the server responded with
 headers: {},

 // `config` is the config that was provided to `axios` for the request
 config: {}
}

response是通过promise的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);
 });

相对的,我们有时也会出现ajax报错,此时就会到我们的catch中去捕获异常error对象。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
VSCode搭建React Native环境
May 07 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
Angular2下使用pdf插件的方法详解
Apr 29 #Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 #Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
Javascript实现数组中的元素上下移动
Apr 28 #Javascript
You might like
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
javascript简易画板开发
2020/04/12 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
九步学会Python装饰器
2015/05/09 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
Overload和Override的区别
2012/09/02 面试题
农民工工资发放承诺书
2014/03/31 职场文书
综艺节目策划方案
2014/06/13 职场文书
全运会口号
2014/06/20 职场文书
2016高考寄语集锦
2015/12/04 职场文书
党员读书活动心得体会
2016/01/14 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫
JavaScript前端面试组合函数
2022/06/21 Javascript
Nginx配置使用详解
2022/07/07 Servers