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>
相关推荐
fouryears_234172 小时前
Flutter InheritedWidget 详解:从生命周期到数据流动的完整解析
开发语言·flutter·客户端·dart
我好喜欢你~3 小时前
C#---StopWatch类
开发语言·c#
加班是不可能的,除非双倍日工资4 小时前
css预编译器实现星空背景图
前端·css·vue3
lifallen4 小时前
Java Stream sort算子实现:SortedOps
java·开发语言
IT毕设实战小研4 小时前
基于Spring Boot 4s店车辆管理系统 租车管理系统 停车位管理系统 智慧车辆管理系统
java·开发语言·spring boot·后端·spring·毕业设计·课程设计
wyiyiyi5 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip5 小时前
vite和webpack打包结构控制
前端·javascript
excel5 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
cui__OaO6 小时前
Linux软件编程--线程
linux·开发语言·线程·互斥锁·死锁·信号量·嵌入式学习
阿华的代码王国6 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端