码迷,mamicode.com
首页 > 移动开发 > 详细

关于axios及其在vue中的配置

时间:2018-03-01 13:18:46      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:发送   接口   first   log   service   rms   console   目的   _for   

  什么是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中的配置

标签:发送   接口   first   log   service   rms   console   目的   _for   

原文地址:https://www.cnblogs.com/jf-67/p/8487769.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!