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 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Vue中对比scoped css和css module的区别
May 17 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
Vue如何将页面导出成PDF文件
Aug 17 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python黑魔法之参数传递
2016/02/12 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
财务经理的岗位职责
2013/12/17 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
给市场的环保建议书
2014/05/14 职场文书
网络营销计划
2015/01/17 职场文书
介绍信格式
2015/01/30 职场文书
学校端午节活动总结
2015/02/11 职场文书