公司中vue脚手架项目使用axios的文件位置管理,入门级别(大神请绕路)javascript欢迎来到前端菜鸟yunchongzhao的博客-

对于高级的前端工程师来说,有这样的一道面试题,你说出你对前端工程化开发的理解哈？

这多简单,就不是注意下代码规范,安全监测,模块化开发。当然这是我小菜鸟装了一下,肯定不会是这么简单就回答上来了。还有一个很重要的工程化开发的要求就是你的文件工程化。不能随意起名字和随意摆放,第三方插件库不能随意的在随意位置上引入了。用一句话总结下就是写代码不能太任性。

尤其是在一些比较看重代码规范的公司,代码都不让你提交git上,这不就意味着你写了半天的代码,做了无用功了么。

在我刚入门vue的时候,第一次使用axios感觉好神奇,配合vue的原型对象一起使用，在所有的子组件中都可以使用
在min.js中引入并使用

import axios from "axios"; axios.defaults.timeout = 10000; //设置连接超时时间 axios.defaults.baseURL = "https://localhost:3000/";  Vue.prototype.axios=axios; 

在组件中

this.axios.post(url,data).then(res=>{  console.log(res.data); }) 

当然上面的方式你也可以在工作中使用,无可厚非 就好像是你的网站开发离开框架也可以照样开发。
我还是那句老话,没有最好的只有最适合的。

然而现实就是,这些往往不是你自己能选择的。在新建立好的src下创建俩个文件夹 一个是util放axios配置 一个api文件夹 放 你请求的接口

在util下的request文件 同时配上请求拦截

import axios from "axios"; //引用axios // axios 配置 const service=axios.create({          timeout:5000,         baseUrl:"https://localhost:3000" // 我们在请求接口的时候就不同写前面 会自动我们补全 }) // 如:https://localhost:3000/user/loginUser            使用aixos的时候直接写   /user/loginUser   就可以了 // 请求拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台， // 我这里是使用sessionStorage来存储token等权限信息和用户信息  token一般时间 比较短  service.interceptors.request.use(       config => { const token = sessionStorage.getItem("token"); //获取存储在本地的token，如果需要token就在这里带上     config.data = JSON.stringify(config.data); // 这里我们也可以在过滤下 请求参数数据     config.headers = { // 设置请求头   常用语post请求  "Content-Type": "application/json" }; if (token) {           config.headers.Authorization = "Token " + token; //存在的话 就携带 token } return config; //  然后把配置返回 },   err => {     console.log(err) //  如果出错的话 打印出来错误看看 } ); //  响应拦截器    请求回来的结果 先在这里过一遍 service.interceptors.response.use(   response => { if (response.status == 201) { //  请求回来的状态除了 200 其他的 均是不对的数据 在这里统一处理 this.$router.push({         path: "/login" //  如果回来状态不对 还是返回 请求页面 }); } return response; // 返回请求回来的数据 },   err => {     console.log(err) } ); export default service; // 把配置好的对象 导出 

在api的index.js 配置你的请求 接口方法

import request from "../utils/request.js"; // 导出登陆的方法  ， 请求的时候只用把参数传递进来就好了 export function login(data) { return new Promise((resolve,reject)=>{ request({       url: "/user/loginUser",       method: "post",       data     }).then(res=>{ resolve(res.data); }).catch(err=>{ reject(err); }) }) } 

然后就是在组件中使用了

import { login } from "../api/index"; //  引入 login方法 async created(){ var res=await login({name:'张三',password:'123456'});  console.log(res); } // 或者下面这样写 created(){ login({name:'张三',password:'123456'}).then(res=>{    console.log(res);// 从接口中回来的数据 }); } 

最后就这样了
祝好朋友工作顺利!