功能强大的网络请求库,基于ajax,基于 Promise 的 HTTP 库,能够用在浏览器和 node.js 中,必须先导入再使用,使用get或post方法便可发送对应的请求,then方法中的回调函数会在请求成功或失败时触发,经过回到函数的形参能够获取响应内容,或者错误信息
注册全局的axios对象
功能特性
一、在浏览器中发送 XMLHttpRequests 请求
二、在 node.js 中发送 http请求
三、支持 Promise API
四、拦截请求和响应
五、转换请求和响应数据
六、取消请求
七、自动转换 JSON 数据
八、客户端支持保护安全免受 CSRF/XSRF ***
————————————————vue
get请求
axios.get(地址?key 1= value1 & key2 = value2).then(function(response){},function(err){})
// 好比向具备指定ID的用户发出请求node
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
————————————————webpack
post请求ios
axios.post(地址,{key1 = value1 & key2 = value2}).then(function(response){},function(err){}) //好比发送表单请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
————————————————es6
执行多个并发请求web
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) { //两个请求现已完成 }));
————————————————ajax
axios结合Vue使用,vue和axios两个库自己没有联系关系,先导入谁均可以
Vue.js 2.0以前使用 vue-resource 除了不支持IE 9如下的浏览器,其余主流的浏览器都支持。
Vue.js 2.0 版本以后推荐使用 axios 来完成 ajax 请求。axios回调函数中的this已经改变,没法访问data中的数据,应使用箭头函数,或者把this保存起来,回调函数中直接使用保存的this便可。vue-cli
若是使用vue-cli
安装 axiosnpm
$ npm install axios $ bower install axios $ yarn add axios
在要使用的文件中引入axiosimport axios from ‘axios
axios
axios支持IE8+,但原理是基于promise之上实现的,所以会存在不兼容IE的问题
解决方案:
(1)、首先安装 babel-polyfill,来解决IE不支持 promise对象的问题
npm install babel-polyfill -s
(2)、安装成功之后须要在 main.js 中引入 babel-polyfill
import 'babel-polyfill'
通常会配置 webpack.base.config.js 中 entry
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: ["babel-polyfill", "./src/main.js"] // app: './src/main.js' }, }
安卓4.3如下的手机不支持axios的使用,没法使用promise
解决方案: (1)、项目中安装 es6-promise
npm install es6-promise -s 或者 npm install es6-promise --save-dev
(2)、引入 es6-promise
import promise from 'es6-promise'
(3)、注册 es6-promise (必定要在axios以前注册)
// 注意: es6-promise 必定要在 axios 以前注册
promise.polyfill() 或者 require('es6-promise').polyfill();
vue中使用Axios调用接口时出现的ie数据处理问题
问题:在其余浏览器中调用接口返回数据而后能够很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的并且也能抓到服务端返回来的数据。但在处理数据时会出现问题。
缘由:typeOf 来查看返回数据的类型发现axios在IE时处理的返回数据竟然是string类型
解决:
let newData; if (typeOf data === 'string') { newData = JSON.parse(data) } else { newData = data }
Node.js 环境
在 node.js里, 可使用 querystring 模块:
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));