axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
npm安装
$ npm install axios --save
通过cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中created(){ axios.get(‘api/getData.php‘,{ // 还可以直接把参数拼接在url后边 params:{ title:‘眼镜‘ } }).then(function(res){ this.goodsList = res.data; }).catch(function (error) { console.log(error); });}
axios.post(‘/user‘, { firstName: ‘Fred‘, lastName: ‘Flintstone‘}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});// 注意: 如果发送请求时，发现传递的参数是对象，那么可用如下方式传参数// var params = new URLSearchParams();// params.append(‘title‘, ‘眼镜‘);// params.append(‘id‘,1);// axios.post(‘/user‘, params)// .then(function(res){})// .catch(function(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) { //两个请求现已完成 }));
//请求拦截器axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });//响应拦截器axios.interceptors.response.use( function (config) { // 对响应数据做点什么 return config; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
// 第一种: 直接在发送的时候，对数据进行qs.stringify处理// 缺点: 如果项目大，有大量的请求需要发送，那么一个一个加会很麻烦axios.post("/checkLogin.php", qs.stringify({ name, pwd}));// 第二种: 使用axios.create创建一个新的axios实例，统一对数据进行处理, 同时也要借助qs模块const Axios = axios.create({ baseURL: ‘/api‘, transformRequest: [function (data) { const d = qs.stringify(data) return d; }]})Axios.post("/checkLogin.php", { name, pwd});
