vue 封装 Axios菜鸟教程

1、Axios依靠下载
  

1. $ npm install axios

复制代码

 2、以下链接为Axios 的api
Axios 实例 | Axios中文文档 | Axios中文网
3、  项目新建request.js，文件名称按照驼峰定名法就可以

4、封装request.js代码如下

1. import axios from "axios"
3. //创建axios实例，设置配置得默认值
4. const instance = axios.create({
5.         baseURL: 'http://localhost:8081',//请求服务端的ip和端口
6.         timeout: 5000 })
7.       instance.interceptors.request.use(config => {
8.         return config
9.       }, error => {
10.         return Promise.reject(error)
11.       })
13. // 向外暴露axios实例
14. export default instance

复制代码

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

1. <template>
2.   <el-form ref="loginForm" :model="loginForm" label-width="80px">
3.     <el-form-item label="用户名">
4.       <el-input v-model="loginForm.username" autocomplete="off"></el-input>
5.     </el-form-item>
6.     <el-form-item label="密码">
7.       <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
8.     </el-form-item>
9.     <el-form-item>
10.       <el-button type="primary" @click="submitForm">登录</el-button>
11.     </el-form-item>
12.   </el-form>
13. </template>
14. <script>
15. import newrequest from '@../../../config/request'
16. export default {
17.   data () {
18.     return {
19.       loginForm: {
20.         username: '111111',
21.         password: '111111'
22.       }
23.     }
24.   },
25.   methods: {
26.     submitForm () {
27.       // 这里应该是登录逻辑，比如发送请求到后端验证用户名和密码
28.       // axios({
29.       //   method: 'post',
30.       //   url: 'http://localhost:8081/getstudent',
31.       //   params: { }}).then((res) => { console.log(res.data) })
33.       console.log('登录表单提交:', this.loginForm)//  console.log('res:', res)
34.       // const instance = axios.create({
35.       //   baseURL: 'http://localhost:8081',
36.       //   timeout: 5000 })
37.       // instance.interceptors.request.use(config => {
38.       //   // const token = localStorage.getItem('token')
39.       //   // if (token) {
40.       //   //   config.headers.Authorization = `Bearer ${token}`
41.       //   // }
42.       //   return config
43.       // }, error => {
44.       //   return Promise.reject(error)
45.       // })
46.       newrequest.request({
47.         method: 'post',
48.         url: '/getstudent'
49.       }).then(data => {
50.         console.log('getstudent:' + data)
51.       }).catch(error => {
52.         console.error(error)
53.       })
54.     }
55.     // getHomeInfo (params) {
56.     //   return request({url: '/login', method: 'post', params})
57.     // }
59.   }
60. }
61. </script>
63. <!-- Add "scoped" attribute to limit CSS to this component only -->
64. <style scoped>
65. h1, h2 {
66.   font-weight: normal;
67. }
68. ul {
69.   list-style-type: none;
70.   padding: 0;
71. }
72. li {
73.   display: inline-block;
74.   margin: 0 10px;
75. }
76. a {
77.   color: #42b983;
78. }
79. .el-form {
80.   width: 240px;
81.   margin: 200px auto;
82. }
83. </style>

复制代码

原生的Axios写法

1. <template>
2.   <el-form ref="loginForm" :model="loginForm" label-width="80px">
3.     <el-form-item label="用户名">
4.       <el-input v-model="loginForm.username" autocomplete="off"></el-input>
5.     </el-form-item>
6.     <el-form-item label="密码">
7.       <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
8.     </el-form-item>
9.     <el-form-item>
10.       <el-button type="primary" @click="submitForm">登录</el-button>
11.     </el-form-item>
12.   </el-form>
13. </template>
14. <script>
15. import axios from 'axios'
16. export default {
17.   data () {
18.     return {
19.       loginForm: {
20.         username: '111111',
21.         password: '111111'
22.       }
23.     }
24.   },
25.   methods: {
26.     submitForm () {
27.       axios({
28.         method: 'post',
29.         url: 'http://localhost:8081/getstudent',
30.         params: {}
31.       }).then((res) => { console.log(res.data) })
32.     }
33.   }
34. }
35. </script>
37. <!-- Add "scoped" attribute to limit CSS to this component only -->
38. <style scoped>
39. h1, h2 {
40.   font-weight: normal;
41. }
42. ul {
43.   list-style-type: none;
44.   padding: 0;
45. }
46. li {
47.   display: inline-block;
48.   margin: 0 10px;
49. }
50. a {
51.   color: #42b983;
52. }
53. .el-form {
54.   width: 240px;
55.   margin: 200px auto;
56. }
57. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。