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>
相关推荐
爱的叹息9 分钟前
Java虚拟机(JVM)家族发展史及版本对比
java·开发语言·jvm
七月丶13 分钟前
❌ 别再用接口文档开发了!我改用“Mock-First”后爽到飞起
前端·javascript·后端
綦枫Maple18 分钟前
Vue实战(08)解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题
前端·ide·vue.js
患得患失94919 分钟前
【前端】【业务场景】【面试】在前端开发中,如何实现文件的上传与下载功能,并且处理可能出现的错误情况?
前端
315356691320 分钟前
Optional 全解析:Java 最被低估的空值处理利器
java·前端·后端
七月丶20 分钟前
🗑 写了 2000 行代码,结果自己全删了。
前端·javascript·后端
SQ有空就喝水24 分钟前
Midscene 提示词工程实战:从入门到精通的 11 个核心技巧
前端·aigc·ai编程
Mike_jia25 分钟前
DBeaver插件开发与高级定制全指南:从入门到架构设计
前端
江城开朗的豌豆26 分钟前
JavaScript篇:遍历数组:for循环与forEach的本质区别与实战选择
前端·javascript·面试
Haku Coder28 分钟前
网络安全零基础培训 L1-7 Web基础和CSS渲染
前端·css