vue axios数据请求及vue中使用axios的示例分析

这篇文章将为大家详细讲解有关vue axios数据请求及vue中使用axios的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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为失败信息    } });

关于“vue axios数据请求及vue中使用axios的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。