vue axios数据请求及vue中使用axios的方法


Posted in Javascript onSeptember 10, 2018

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

--------------------------------------------------------------------------------
•从浏览器中创建 XMLHttpRequest
•从 node.js 发出 http 请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换JSON数据
•客户端支持防止 CSRF/XSRF

在vue中数据请求需要先安装axios

 npm i --save axios

我们在使用请求数据的页面导入axios

import  axios from "axios"

然后在methods里面写数据的请求

methods:{
  getInfo(){
   let url = "url"
   axios.get(url).then((res)=>{
     //console.log(res)
     this.list1 = res
   })
}

在生命周期调用一下,一般我们数据请求使用的生命周期是Mounted

mounted() {
  this.getInfo()       
 }

这样我们就完成了axios的get方法请求

然后我们简答的说一说post请求,post请求与get请求其实变得不多

postInfo() {
   let url = "..."
   var params = new URLSearchParams();
   params.append('key', index);
   axios.post(url, params).then((res) => {
     console.log(res)
   })
 }

这样我们就可以成功的使用post方法请求数据了

补充:下面看下vue中使用axios

1.安装axios

npm:

$ npm install axios -S

cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.配置axios

在项目中新建api/index.js文件,用以配置axios

api/index.js

import axios from 'axios';
let http = axios.create({
 baseURL: 'http://localhost:8080/',
 withCredentials: true,
 headers: {
  'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
 },
 transformRequest: [function (data) {
  let newData = '';
  for (let k in data) {
   if (data.hasOwnProperty(k) === true) {
    newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
   }
  }
  return newData;
 }]
});
function apiAxios(method, url, params, response) {
 http({
  method: method,
  url: url,
  data: method === 'POST' || method === 'PUT' ? params : null,
  params: method === 'GET' || method === 'DELETE' ? params : null,
 }).then(function (res) {
  response(res);
 }).catch(function (err) {
  response(err);
 })
}
export default {
 get: function (url, params, response) {
  return apiAxios('GET', url, params, response)
 },
 post: function (url, params, response) {
  return apiAxios('POST', url, params, response)
 },
 put: function (url, params, response) {
  return apiAxios('PUT', url, params, response)
 },
 delete: function (url, params, response) {
  return apiAxios('DELETE', url, params, response)
 }
}

这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式

同时配置了跨域,不需要的话将withCredentials设置为false即可

并且设置了默认头部地址为:http://localhost:8080/,这样调用的时候只需写访问方法即可

3.使用axios

注:PUT请求默认会发送两次请求,第一次预检请求不含参数,所以后端不能对PUT请求地址做参数限制

首先在main.js中引入方法

import Api from './api/index.js';
Vue.prototype.$api = Api;

然后在需要的地方调用即可

this.$api.post('user/login.do(地址)', {
  "参数名": "参数值"
}, response => {
   if (response.status >= 200 && response.status < 300) {
    console.log(response.data);\\请求成功,response为成功信息参数
   } else {
    console.log(response.message);\\请求失败,response为失败信息
   }
});
Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
vue插件实现v-model功能
Sep 10 #Javascript
在Angular中使用JWT认证方法示例
Sep 10 #Javascript
详解vue-router传参的两种方式
Sep 10 #Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 #Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 #Javascript
在Vue 中使用Typescript的示例代码
Sep 10 #Javascript
ES6使用export和import实现模块化的方法
Sep 10 #Javascript
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
文件上传的实现
2006/10/09 PHP
PHP多文件上传实例
2015/07/09 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
js中widow.open()方法使用详解
2013/07/30 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
js给selected添加options的方法
2015/05/06 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
python双向链表实现实例代码
2013/11/21 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
彻底理解Python中的yield关键字
2019/04/01 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
信息管理专业学生自荐信格式
2013/09/22 职场文书
服务标兵事迹材料
2014/05/04 职场文书
社区助残日活动总结
2014/08/29 职场文书
保险内勤岗位职责
2015/04/13 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
MySQL sql_mode的使用详解
2021/05/08 MySQL
「月刊Action」2022年5月号封面公开
2022/03/21 日漫