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;
        // }
      });
    }
方法不要忘了调用