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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
详细谈谈JavaScript中循环之间的差异
Aug 23 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
php用header函数实现301跳转代码实例
2013/11/25 PHP
php对象工厂类完整示例
2018/08/09 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
js加强的经典分页实例
2013/03/15 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python随机读取文件实现实例
2017/05/25 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
python 等差数列末项计算方式
2020/05/03 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
Python自省及反射原理实例详解
2020/07/06 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
信息技术课后反思
2014/04/27 职场文书
2014年残联工作总结
2014/11/21 职场文书
公司市场部岗位职责
2015/04/15 职场文书
学困生转化工作总结
2015/08/13 职场文书