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 相关文章推荐
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
web 页面分页打印的实现
Jun 22 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
node(koa2) web应用模块介绍详解
Mar 29 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
JS数据类型STRING使用实例解析
Dec 18 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
php调用shell的方法
2014/11/05 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Django-migrate报错问题解决方案
2020/04/21 Python
浅谈Python 函数式编程
2020/06/20 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
销售经理工作职责范文
2013/12/03 职场文书
校园门卫岗位职责
2013/12/09 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
教师节促销方案
2014/03/22 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年副班长工作总结
2014/12/10 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle