Vue项目之Axios数据请求
来源:互联网 发布:苹果tv怎么设置网络 编辑:程序博客网 时间:2024/06/06 04:27
撸了两个月的项目代码,终于可以喘口气,写一下自己在Vue项目中所学习到的经验了。
所有项目都避不开向后台请求数据,而为了响应我们 尤大大 的倡导,我们项目决定使用 Axios 处理数据请求的问题。下面就是我学到的,贡献大家,希望对你们有所帮助。
Axios使用手册 (我就是看着这个边学习边写项目的)
Vue项目中,将Axios封装为一个函数,方便我们以后重复调用
//引入 Axios import Axios from 'axios'//引入 Axios 请求数据所需要的配置文件,这个稍后有答案,很简单import Config from './Config.js'//项目中引用了 ElementUI,用加载和提示两个组件,在请求数据时,后返回状态码后的行为import { Loading } from 'element-ui'import { Notification } from 'element-ui'let loading;// 添加请求拦截器,在请求时,显示 ElementUI 的加载组件Axios.interceptors.request.use(function (config) { loading = Loading.service({ fullscreen: true ,text:'疯狂加载中'}); return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });// 添加响应拦截器 ,请求结束后,关闭 加载组件Axios.interceptors.response.use(function (response) { loading.close(); return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });// 封装请求数据的对象方法class Ajax { static Get(url){ // 通过Promise完成异步操作,将数据进行初步处理输出为Json对象 var P = new Promise(function(resolve, reject){ Axios.get(url,Config) .then((res)=>{ //判断后台返回状态码,作出相应行为 switch(res.data.status){ case 0: Notification({ title : '错误提示', message : res.data.message, type : 'error' }); break; default: resolve(res.data.data); break; } }).catch((error)=>{ console.log(error) reject(error); }); }); return P } static Post(url){ var P = new Promise(function(resolve, reject){ Axios.get(url,data,Config) .then((res)=>{ console.log(res.data.data) switch(res.data.status){ case 0: Notification({ title : '错误提示', message : res.data.message, type : 'error' }); break; default: resolve(res.data.data); break; } }).catch((error)=>{ console.log(error) reject(error); }); }); return P }}// 将封装好的 Ajax函数方法输出,方便调用export default Ajax;
说好的配置文件,在这里,继续向下看吧。
//Qs 是个数据处理插件,标配import Qs from 'qs'export default{ //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url url: '/route', // 请求方法同上 method: 'get', // default // 基础url前缀,请求数据时,会把baseURL和url拼接为完整的请求路径 baseURL: 'Router/', transformRequest: [function (data) { // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) data = Qs.stringify({}); return data; }], transformResponse: [function (data) { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {'X-Requested-With': 'XMLHttpRequest'}, // `paramsSerializer` 是一个负责 `params` 序列化的函数 // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/) paramsSerializer: function(params) { return Qs.stringify(params, {arrayFormat: 'brackets'}) }, //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错 //设置超时时间,随意 timeout: 1000, //返回数据类型 responseType: 'json', // default // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte validateStatus: function (status) { return status >= 200 && status < 300; // 默认的 }, // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目 // 如果设置为0,将不会 follow 任何重定向 maxRedirects: 5, // 默认的}
Axios使用手册 ,这个使用手册里面还有很多参数,看项目情况使用,我这里就不多说了。
阅读全文
2 0
- Vue项目之Axios数据请求
- Vue项目之Axios数据请求
- 基于vue-cli的vue项目之axios的使用5--axios方法发送请求
- vue之请求方法--axios
- 基于vue-cli的vue项目之axios的使用2--最基础的请求
- 基于vue-cli的vue项目之axios的使用3--get传参请求
- 基于vue-cli的vue项目之axios的使用4--并发请求
- vue 请求采用axios
- vue项目封装axios
- vue使用axios异步请求后端数据的使用
- Vue用axios请求数据proxyTable解决跨域问题
- vue2.0数据请求之axios
- vue 组件的封装之基于axios的ajax请求
- Vue.js实战之使用Vuex + axios发送请求详解
- 基于vue-cli的vue项目之axios的使用6--配置axios
- vue之axios使用
- vue之axios
- Vue之axios
- Markdowm 的常用语法
- GET-POST 其他配置
- extjs框架get请求中文乱码
- 并发修改异常原理与解决方法
- 利用第三方接口,实现地区联动
- Vue项目之Axios数据请求
- ALV输出的时候,输出字段内容前面的空格
- 使用sklearn做单机特征工程
- OpenCV
- 测试
- 数据库索引
- Xen 虚拟机重命名
- tcp三次握手与四次挥手
- 快速排序的递归实现算法