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----文件操作
Jan 18 Javascript
[转]JS宝典学习笔记
Feb 07 Javascript
二行代码解决全部网页木马
Mar 28 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
利用Python如何生成随机密码
2016/04/20 Python
Python中如何获取类属性的列表
2016/12/26 Python
python添加模块搜索路径方法
2017/09/11 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python找出因数与质因数的方法
2019/07/25 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
汽车运用工程毕业生自荐信
2013/10/29 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
欠条样本
2015/07/03 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python