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 相关文章推荐
JavaScript更改class和id的方法
Oct 10 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
微信小程序 教程之模板
Oct 18 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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数据库类
2009/05/27 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php无序树实现方法
2015/07/28 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php数组指针操作详解
2017/02/14 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python读写文件write和flush的实现方式
2020/02/21 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
C#实现启动一个进程
2016/10/01 面试题
公司同意接收函
2014/01/13 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
贷款工资证明范本
2015/06/12 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
讲解MySQL增删改操作
2022/05/06 MySQL