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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
jQuery $.each的用法说明
2010/03/22 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python语言中with as的用法使用详解
2018/02/23 Python
python破解zip加密文件的方法
2018/05/31 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python多维数组分位数的求取方式
2020/03/03 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
python绘制趋势图的示例
2020/09/17 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
药学专业大学生个人的自我评价
2013/11/04 职场文书
中考冲刺决心书
2014/03/11 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
2014国庆节标语口号
2014/09/19 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
2015年度企业工作总结
2015/05/21 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android