Vue axios简单使用

Vue axios简单使用的简单使用

安装: npm install axios -D

有一个问题:我明明配置了全局可是用的时候还是得一个一个引入axios( 我也不知道为什么 )

main.js中引入axios
配置全局我这里是设置了代理
import axios from "axios";
Vue.prototype.$ajax = axios;//给他原型加一个属性为$ajax
axios.defaults.baseURL = "/api";
api文件中放的是对应页面的js文件也就是接口
// 角色管理 管理接口
// 查看 === 渲染
import axios from "axios";用async/ await来发送异步请求,从服务端获取数据,等待获取数据,然后处理数据
export async function roleManagementLook(req) { //这个参数就是请求参数时传给后端的值
  const res = await axios.post("/role/list", req);
  return res;
}
对应调用接口页面的方法中先引入api中接口的方法,并结构出来

import { roleManagementLook } from "../../api/roleManagement.js";

// 查看接口
    getList() {
      const req = { //以参数形式传给后端
        id: null,
        name: null,
        useStatus: null,
        page: this.page,
        limit: this.limit
      };
      roleManagementLook(req).then(res => {
        this.roleManagementList = res.data.data.rows;
        // if (res.code === "200") {
        //   this.$message({
        //     type: "success",
        //     message: "新建成功"
        //   });
        // } else {
        //   return false;
        // }
      });
    }方法不要忘了调用

原文地址:https://www.cnblogs.com/home-/p/11659862.html

时间: 2024-10-08 22:24:05

Vue axios简单使用的相关文章

vue+axios+elementUI文件上传与下载

vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用. 图片.png 代码如下: <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :sh

基于Vue + axios + WebApi + NPOI导出Excel文件

一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页(如会员信息,订单信息等)表格数据导出,如表格数据进行了条件筛选,则需要将条件传至后端api,筛选数据后,导出成Excel. 思考过前端导出的3种方案: 1.使用location.href 打开接口地址.缺点: 不能传token至后端api, 无法保证接口的安全性校验,并且接口只能是get方式请求.

vue axios请求频繁时取消上一次请求

一.前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响.例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求并没有必要真的发送出去,这时候就需要在发送新请求的时候直接取消上一次请求.vue axios拦截器介绍 原文地址:https://www.cnblogs.com/lalalagq/p/9939542.html 二.代码 <script> import axios from 'axios' impo

VUE实现简单的全选/全不选

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; margin: 100

解决vue axios跨域请求发送两次问题

问题: vue axios跨域请求,在Request Headers加Authorization传递Token时,发现统一请求触发了两次,第一次是Request Method: OPTIONS请求. 原因: 跨域请求时,浏览器会首先使用OPTIONS方法发起一个预请求,判断接口是否能够正常通讯.如果通讯异常,则不会发送真正的请求,如果测试通讯正常,则开始真正的请求. 解决方法: 后台:判断请求方式是OPTIONS,则不处理: 预请求 发送真正请求  PHP解决方法 class Common ex

vue超简单加载字体方法,解决scss难加载字体的问题

vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后,scss设置的字体依旧可以正确识别,注意style的lang不要写,就使用原生css 示例引入 <style> @font-face{ font-family: pingfang; src: url('./style/pingfang.ttf') } </style> 然后想要的位置

vue中简单的数据请求 fetch axios

fetch 不需要额外的安装什么东西,直接就可以使用 fetch(url, { method:'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: "name=kerwin&age=100" }).then(res => res.json()).then(data => {console.log(data)}) -------------------------

vue + axios 实现图片上传 简单版

uploadImg(img) { // img => base64图片地址 let param = new FormData(); //创建form对象 param.append('multipartFile', this.dataURLtoBlob(img));// base64 转 二进制流 multipartFile => 后端要求的参数 this.$axios({ method: 'post', // post 方式 url: '/ss-minprogram/uploads', //

Vue+axios 实现http拦截及路由拦截

现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了. 技术栈 vue2.0 vue-router axios 拦截器 首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 这个项目我引入了element ui框架,所以我是结合element中loading和me