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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
JS检测图片大小的实例
Aug 21 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
记录一次websocket封装的过程
Nov 23 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
收音机的保养
2021/03/01 无线电
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
Python数据结构之图的应用示例
2018/05/11 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
python 爬虫请求模块requests详解
2020/12/04 Python
python中封包建立过程实例
2021/02/18 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
cf搞笑广告词
2014/03/14 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年老干部工作总结
2015/04/23 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技