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>