DDR爱好者之家

vue axios数据请求及vue中使用axios的方法
站长资源 2024/11/19 佚名
29 1538
DDR爱好者之家 Design By 杰米

axios 简介

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

--------------------------------------------------------------------------------
"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="/UploadFiles/2021-04-02/axios.min.js">

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' "http://localhost:8080/">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为失败信息
   }
});
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米