vue 封装 Axios菜鸟教程

1、Axios依赖下载

复制代码
$ npm install axios

2、以下链接为Axios 的api

Axios 实例 | Axios中文文档 | Axios中文网

3、 项目新建request.js,文件名称按照驼峰命名法就可以

4、封装request.js代码如下

复制代码
import axios from "axios"
 
//创建axios实例,设置配置得默认值
 const instance = axios.create({
        baseURL: 'http://localhost:8081',//请求服务端的ip和端口
        timeout: 5000 })
      instance.interceptors.request.use(config => {
        return config
      }, error => {
        return Promise.reject(error)
      })

// 向外暴露axios实例
export default instance

测试代码如下,'@../../../config/request'引用的封装好的request.js文件

复制代码
<template>
  <el-form ref="loginForm" :model="loginForm" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="loginForm.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import newrequest from '@../../../config/request'
export default {
  data () {
    return {
      loginForm: {
        username: '111111',
        password: '111111'
      }
    }
  },
  methods: {
    submitForm () {
      // 这里应该是登录逻辑,比如发送请求到后端验证用户名和密码
      // axios({
      //   method: 'post',
      //   url: 'http://localhost:8081/getstudent',
      //   params: { }}).then((res) => { console.log(res.data) })

      console.log('登录表单提交:', this.loginForm)//  console.log('res:', res)
      // const instance = axios.create({
      //   baseURL: 'http://localhost:8081',
      //   timeout: 5000 })
      // instance.interceptors.request.use(config => {
      //   // const token = localStorage.getItem('token')
      //   // if (token) {
      //   //   config.headers.Authorization = `Bearer ${token}`
      //   // }
      //   return config
      // }, error => {
      //   return Promise.reject(error)
      // })
      newrequest.request({
        method: 'post',
        url: '/getstudent'
      }).then(data => {
        console.log('getstudent:' + data)
      }).catch(error => {
        console.error(error)
      })
    }
    // getHomeInfo (params) {
    //   return request({url: '/login', method: 'post', params})
    // }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-form {
  width: 240px;
  margin: 200px auto;
}
</style>

原生的Axios写法

复制代码
<template>
  <el-form ref="loginForm" :model="loginForm" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="loginForm.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      loginForm: {
        username: '111111',
        password: '111111'
      }
    }
  },
  methods: {
    submitForm () {
      axios({
        method: 'post',
        url: 'http://localhost:8081/getstudent',
        params: {}
      }).then((res) => { console.log(res.data) })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.el-form {
  width: 240px;
  margin: 200px auto;
}
</style>
相关推荐
Mintopia2 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙2 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院5 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记7 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人9218 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada8 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia9 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj9 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人15 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼16 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试