关于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请求：　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// 为给定 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请求：

?

1 2 3 4 5 6 7 8 9 10

axios.post('/user', {     firstName: 'Fred',     lastName: 'Flintstone' }) .then(function (response) {     console.log(response); }) .catch(function (error) {     console.log(error); });

　　

　　3、执行多个并发请求：

?

1 2 3 4 5 6 7 8 9 10 11 12

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，如：

?

1	axios.defaults.baseURL = 'https://some-domain.com/api/';

　　

　　这样在其他要发送请求的地方只需要这样写即可：

?

1 2 3 4 5 6 7 8 9

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，这样也便于以后更改接口地址