VUE中使用HTTP库Axios方法详解


Posted in Javascript onFebruary 05, 2020

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中

安装Axios模块

在Vue中使用,最好安装两个模块axios 和vue-axios

$npm install axios vue-axios --save

然后引用并使用模块

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios)

在组件中通过如下方式进行使用

this.$http[method]()

Axios模块特性

1、可以从浏览器中创建XHR对象

2、可以从nodeJS中创建HTTP请求

3、支持Promise API 

4、可以拦截请求和响应

5、可以转换请求数据和响应数据

6、可以取消请求

7、可以自动转换JSON数据

8、客户端支持防御XSRF

Vue下使用使用Axios

下面是一些简单的请求实例

get请求

仅仅向后端请求数据

axios.get('index.php')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

通过URL向后端发送数据,要使用params属性,params属性包含即将与请求一起发送的数据

运行下列代码后,请求URL变更为index.php?id=12345&text=%E5%B0%8F%E7%81%AB%E6%9F%B4

axios.get('index.php',{
 params:{
  id:12345,
 text:'3water'
 }
}).then((response)=>{
 console.log(response)
}).catch((error)=>{
 console.log(error)
})

当然,也可以把数据直接写到URL中

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

post请求

一般来说,post请求更多的是要提交数据,params属性里的数据会出现在请求主体中

[注意]如果是axios.create()方法中的params属性,则其里面的数据会出现在URL参数中

但实际上,post方法不需要使用params属性,它的第二个参数就是要发送的数据

axios.post('index.php',{
 id:12345,
 text:'3water'
}).then((response)=>{
 console.log(response)
}).catch((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) {
  // acct为第一个请求的结果,perms为第二个请求的结果
 }));

Axios中的API

axios()

可以通过向 axios 传递相关配置来创建请求

axios(config)
// 发送 POST 请求
axios({
 method: 'post',
 url: '/user/12345',
 data: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
});
axios(url[,config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');

别名

为方便起见,为所有支持的请求方法提供了别名

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])
var instance = axios.create({
 baseURL: 'https://3water.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` 是用于请求的服务器 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.3water.com/package/qs, http://api.3water.com/jquery.param/)
 paramsSerializer: function(params) {
  return Qs.stringify(params, {arrayFormat: 'brackets'})
 },
 // `data` 是作为请求主体被发送的数据,只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
 // 在没有设置 `transformRequest` 时,必须是以下类型之一:string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParam,浏览器专属: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
 cancelToken: new CancelToken(function (cancel) {
 })
}

下面是一个实例

let HTTP = axios.create({
 baseURL: 'http://localhost/',
 timeout:1000,
 headers:{
  'author':'xiaohuochai'
 }
})
HTTP.post('index.php',{
 id:12345,
 text:'3water'
}).then((response)=>{
 console.log(response)
}).catch((error)=>{
 console.log(error)
})

结果如下

VUE中使用HTTP库Axios方法详解

响应结构

某个请求的响应包含以下信息

{
 // `data` 由服务器提供的响应
 data: {},
 // `status` 来自服务器响应的 HTTP 状态码
 status: 200,
 // `statusText` 来自服务器响应的 HTTP 状态信息
 statusText: 'OK',
 // `headers` 服务器响应的头
 headers: {},
 // `config` 是为请求提供的配置信息
 config: {}
}

使用 then 时,将接收下面这样的响应:

.then(function(response) {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
 });

配置默认值

可以指定将被用在各个请求的配置默认值

全局的axios默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
 baseURL: 'https://www.3water.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置优先顺序

配置会以一个优先顺序进行合并。这个顺序是:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
// 覆写库的超时默认值
// 现在,在超时前,所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
 timeout: 5000
});

拦截器

在请求或响应被 then 或 catch 处理前拦截它们

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
 }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
 });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
 }, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
 });

如果想在稍后移除拦截器,可以这样:

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

错误处理

axios.get('/user/12345')
 .catch(function (error) {
  if (error.response) {
   // 请求已发出,但服务器响应的状态码不在 2xx 范围内
   console.log(error.response.data);
   console.log(error.response.status);
   console.log(error.response.headers);
  } else {
   // Something happened in setting up the request that triggered an Error
   console.log('Error', error.message);
  }
  console.log(error.config);
 });

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围

axios.get('/user/12345', {
 validateStatus: function (status) {
  return status < 500; // 状态码在大于或等于500时才会 reject
 }
})

取消

可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
  console.log('Request canceled', thrown.message);
 } else {
  // 处理错误
 }
});
// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token

var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
 cancelToken: new CancelToken(function executor(c) {
  // executor 函数接收一个 cancel 函数作为参数
  cancel = c;
 })
});
// 取消请求
cancel();

[注意] 可以使用同一个 cancel token 取消多个请求

下面是一个实例

let CancelToken = axios.CancelToken;
let source = CancelToken.source();
let HTTP = axios.create({
 baseURL: 'http://localhost/',
 params:{
  a:123
 },
})
HTTP.post('index.php',{
 id:12345,
 text:'3water'
},{
 cancelToken: source.token,
}).then((response)=>{
 commit('fnChangeList',{listData:response.data})
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
  console.log('Request canceled', thrown.message);
 } else {
  console.log('err');
 }
});
source.cancel('Operation canceled by the user.');

最终在控制台中打印出如下信息

Request canceled Operation canceled by the user.

更多关于VUE中使用HTTP库Axios的文章大家可以点击下面的相关链接

Javascript 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
javascript常用方法总结
May 14 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 #Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 #Javascript
vue使用原生swiper代码实例
Feb 05 #Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 #Javascript
JS原型和原型链原理与用法实例详解
Feb 05 #Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 #Javascript
小程序如何写动态标签的实现方法
Feb 05 #Javascript
You might like
PL-880隐藏功能
2021/03/01 无线电
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python中使用中文的方法
2011/02/19 Python
Python版的文曲星猜数字游戏代码
2013/09/02 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
迟到检讨书900字
2014/01/14 职场文书
学校安全责任书
2014/04/14 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
关于工作经历的证明书
2014/10/11 职场文书
爱心捐款感谢信
2015/01/20 职场文书