关于axios及其在vue中的配置
Posted 心欲无痕
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于axios及其在vue中的配置相关的知识,希望对你有一定的参考价值。
什么是axios?官方解释:axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
具有以下特点:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
但是对于目前的我而言,它就是一种用来发送网络请求的方法。
使用axios发送请求很简单,代码也极其条理化。
安装方法:
(1)、使用npm:
$ npm install axios
(2)、使用bower:
$ bower install axios
(3)、使用CDN加速服务
例如:<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
使用axios发送请求:
1、执行get请求:
// 为给定 ID 的 user 创建请求 axios.get(\'/user?ID=12345\') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可选地,上面的请求可以这样做 axios.get(\'/user\', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
2、执行post请求:
axios.post(\'/user\', { firstName: \'Fred\', lastName: \'Flintstone\' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
3、执行多个并发请求:
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) { // 两个请求现在都执行完成 }));
当然也可以通过向axios传递相关配置来创建请求,例如,我们在vue项目中使用axios来发送请求,这种方式就及其必要了。举例说明:我们在写项目的时候,有时候用的是一个接口地址,但是后期因为某种原因需要变更接口地址,这种情况下,假如我们之前创建请求时都是使用的绝对路径,也就是绝对的url,而我们知道一个项目中通常会包含许多的请求,遇到这种情况就必须一个一个的去改了。
但是,如果我们在axios配置中配置一个baseURL,后面在发送请求的时候,只需要写上接口的相对url就行了。这种情况下,如果遇到需要更改接口地址的话,只需要更改配置项中的baseURL即可,而不用一个一个的去更改,是不是就方便多了。
这里以基于iview的后台管理为例(可参考 基于iview的后台管理),在项目的index.html文件中,引入axios文件,可通过CDN方式引入,然后就可以在src/main.js文件中添加baseURL,如:
axios.defaults.baseURL = \'https://some-domain.com/api/\';
这样在其他要发送请求的地方只需要这样写即可:
global.axios.post(\'adminN_1.service\', { // 接口的上传参数 }) .then(data => { console.log(\'返回数据\', data) }) .catch(e => { console.log(e) })
说明:
(1)、如果没有指定 method
,请求将默认使用 get
方法。
(2)、`baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL,这样也便于以后更改接口地址
以上是关于关于axios及其在vue中的配置的主要内容,如果未能解决你的问题,请参考以下文章
VSCode自定义代码片段14——Vue的axios网络请求封装