【vue】使用axios发送哀求

---

  
一、项目环境设置

根组件App.vue

路由设置

main.js设置
固定写法，复制粘贴即可

二、使用axios发送POST哀求登录

1. <template>
2.         <div class="box1">
3.                 <el-form label-width="120px">
4.                         <el-form-item label="用户名">
5.                                 <el-input v-model="loginForm.username"></el-input>
6.                         </el-form-item>
7.                         <el-form-item label="密码">
8.                                 <el-input type="password" v-model="loginForm.password"></el-input>
9.                         </el-form-item>
10.                         <el-form-item>
11.                                 <el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
12.                         </el-form-item>
13.                 </el-form>
14.         </div>
16. </template>
18. <script>
19. import axios from 'axios'
23.         // 使用axios发送post请求
24.         // 案例：实现登录
25.         export default{
26.                 data(){
27.                         return{
28.                                 loginForm:{
29.                                         username:"",
30.                                         password:""
31.                                 }
32.                         }
33.                 },
34.                 methods:{
35.                         // 点击登录执行的方法
36.                         submitLogin(){
37.                                 console.log('点击了登录,',this.loginForm)
38.                                 // 点击了登录如何发送http请求？axios
39.                                 const params={
40.                                         username:this.loginForm.username,
41.                                         password:this.loginForm.password
42.                                 }
43.                                 // 登录的post请求
44.                                 const res = axios.post('http://82.156.178.247:5001/users/login/',params)
45.                                 console.log('res',res)
47.                                 // 设置回调函数，接收返回的响应对象
48.                                 // 异步操作成功时，执行的回调函数
49.                                 res.then(response=>{
50.                                         console.log('请求成功:')
51.                                         console.log('respnse',response)
52.                                 })
53.                                 // 异步操作失败时，执行的回调函数
54.                                 res.catch(error=>{
55.                                         console.log('请求失败:')
56.                                         // console.log('error:',error)
57.                                         console.log('请求失败响应对象获取',error.response)
58.                                 })
59.                         }
60.                 }
61.         }
63. </script>
65. <style>
67. </style>

复制代码

哀求失败时，控制台输出的对象

哀求成功时，控制台输出的对象

三、异步实现：使用axios发送POST哀求登录（json）

1. <template>
2.         <div class="box1">
3.                 <el-form label-width="120px">
4.                         <el-form-item label="用户名">
5.                                 <el-input v-model="loginForm.username"></el-input>
6.                         </el-form-item>
7.                         <el-form-item label="密码">
8.                                 <el-input type="password" v-model="loginForm.password"></el-input>
9.                         </el-form-item>
10.                         <el-form-item>
11.                                 <el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
12.                         </el-form-item>
13.                 </el-form>
14.         </div>
16. </template>
18. <script>
19. import axios from 'axios'
23.         // 使用axios发送post请求
24.         // 案例：实现登录
25.         export default{
26.                 data(){
27.                         return{
28.                                 loginForm:{
29.                                         username:"",
30.                                         password:""
31.                                 }
32.                         }
33.                 },
34.                 methods:{
35.                         // 点击登录执行的方法
36.                         async submitLogin(){
37.                                 const params={
38.                                         username:this.loginForm.username,
39.                                         password:this.loginForm.password
40.                                 }
41.                                 // 登录的post请求
42.                                 const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
43.                                 console.log('response:',response)
44.                                 // 对响应信息进行判断
45.                                 if (response.status===200){
46.                                         this.$message({
47.                                                 type:"success",
48.                                                 message:"登录成功"
49.                                         });
50.                                         // 跳转
51.                                         this.$router.push({name:"index"})
52.                                 }
53.                         },
55.                 }
56.         }
58. </script>
60. <style>
62. </style>

复制代码

四、异步实现：使用axios发送POST哀求登录（表单）

1. <template>
2.         <div class="box1">
3.                 <el-form label-width="120px">
4.                         <el-form-item label="用户名">
5.                                 <el-input v-model="loginForm.username"></el-input>
6.                         </el-form-item>
7.                         <el-form-item label="密码">
8.                                 <el-input type="password" v-model="loginForm.password"></el-input>
9.                         </el-form-item>
10.                         <el-form-item>
11.                                 <el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
12.                         </el-form-item>
13.                 </el-form>
14.         </div>
16. </template>
18. <script>
19. import axios from 'axios'
20. import qs from 'qs'
23.         // 使用axios发送post请求
24.         // 案例：实现登录
25.         export default{
26.                 data(){
27.                         return{
28.                                 loginForm:{
29.                                         username:"",
30.                                         password:""
31.                                 }
32.                         }
33.                 },
34.                 methods:{
35.                         // 点击登录执行的方法
36.                         async submitLogin(){
37.                                 // axios发送表单格式的请求
38.                                 const params = qs.stringify(this.loginForm)
39.                                 // 登录的post请求
40.                                 const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
41.                                 console.log('response:',response)
42.                                 // 对响应信息进行判断
43.                                 if (response.status===200){
44.                                         this.$message({
45.                                                 type:"success",
46.                                                 message:"登录成功"
47.                                         });
48.                                         // 跳转
49.                                         this.$router.push({name:"index"})
50.                                 }
51.                         },
53.                 }
54.         }
56. </script>
58. <style>
60. </style>

复制代码

五、token存储

生存登录返回的token
获取token
const token=response.data.token
生存到LocalStorage中：永久存储，只有不手动删除，永久生存到LocalStorage中
window.localStorage.setItem(‘token’,token)
生存到sessionStorage中：关闭浏览器之后，删除内容
window.sessionStorage.setItem(‘token’,token)
生存到cookie中：
window.cookieStore.set(‘token’,token)

1. <template>
2.         <div class="box1">
3.                 <el-form label-width="120px">
4.                         <el-form-item label="用户名">
5.                                 <el-input v-model="loginForm.username"></el-input>
6.                         </el-form-item>
7.                         <el-form-item label="密码">
8.                                 <el-input type="password" v-model="loginForm.password"></el-input>
9.                         </el-form-item>
10.                         <el-form-item>
11.                                 <el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
12.                         </el-form-item>
13.                 </el-form>
14.         </div>
16. </template>
18. <script>
19. import axios from 'axios'
20. import qs from 'qs'
23.         // 使用axios发送post请求
24.         // 案例：实现登录
25.         export default{
26.                 data(){
27.                         return{
28.                                 loginForm:{
29.                                         username:"",
30.                                         password:""
31.                                 }
32.                         }
33.                 },
34.                 methods:{
35.                         // 点击登录执行的方法
36.                         async submitLogin(){
37.                                 // axios发送json格式的请求
38.                                 const params={
39.                                         username:this.loginForm.username,
40.                                         password:this.loginForm.password
41.                                 }
42.                                 // 登录的post请求
43.                                 const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
44.                                 console.log('response:',response)
45.                                 // 对响应信息进行判断
46.                                 if (response.status===200){
47.                                         this.$message({
48.                                                 type:"success",
49.                                                 message:"登录成功"
50.                                         });
51.                                         // 跳转
52.                                         this.$router.push({name:"index"})
53.                                         // 保存登录返回的token
54.                                         // 获取token
55.                                         const token=response.data.token
56.                                         // 保存到LocalStorage中
57.                                         // window.localStorage.setItem('token',token)
58.                                         // // 保存到sessionStorage中
59.                                         // window.sessionStorage.setItem('token',token)
60.                                         // 保存到cookie中
61.                                         window.cookieStore.set('token',token)
62.                                 }
63.                         },
65.                 }
66.         }
68. </script>
70. <style>
72. </style>

复制代码

六、token使用

1. <template>
2.         <h1>index页面</h1>
3.         <el-button @click="getAllProject">获取项目数据</el-button>
5.         <h3>{{pros}}</h3>
6. </template>
8. <script>
9. import axios from 'axios'
11.         export default{
12.                 data(){
13.                         return{
14.                                 pros:{
16.                                 }
17.                         }
18.                 },
19.                 methods:{
20.                         async getAllProject(){
21.                                 // 发送请求
22.                                 const url="http://82.156.178.247:5001/projects/"
23.                                 const response=await axios.get(url,{
24.                                         headers:{
25.                                                 'Authorization':'JWT ' + window.sessionStorage.getItem('token')
26.                                         }
27.                                 });
28.                                 console.log('response',response);
29.                                 this.pros=response.data
30.                         }
31.                 }
32.         }
33. </script>
35. <style>
36. </style>

复制代码

七、全局的axios设置

在api/index.js中对axios对后端哀求举行同一封装

1、方式一

1. // 针对axios对后端请求进行统一封装（方便后期维护管理）
2. import axios from "axios"
4. // 方式一：直接配置axios对象，进行相关的封装
5. // 设置全局的baseURL
6. axios.defaults.baseURL='http://82.156.178.247:5001'
7. axios.defaults.headers.common['kobe']='0924'
9. export const login=(params)=>{
10.         axios.post('/login',params)
11. }
13. export const getALLPro=()=>{
14.         axios.get('/login')
15. }

复制代码

2、方式二

1. // 方式二：使用axios创建实例进行相关的配置和封装(适用于微服务的架构)
3. const http=axios.create({
4.         // 配置baseURL
5.         baseURL:'http://82.156.178.247:5001',
6.         // 配置请求成功的http响应状态码的范围（全部当作成功的处理）
7.         validateStatus:function(status){
8.                 return true;
9.         }
10. })
12. export default{
13.         login(params){
14.                 return http.post('/login/',params)
15.         },
16.         getAllProject(){
17.                 return http.get('/projects/')
18.                        
19. }
20. }

复制代码

在main.js中导入index.js，作为全局对象，方便以后的开辟项目中使用
$api为属性名称

八、哀求拦截器和响应拦截器

1. // 设置请求拦截器
2. http.interceptors.request.use(function (config){
3.         // config为请求对象
4.         // 如果不是登录接口，那么在请求头中加上Authorization
5.         if(config.url!=='/login/'){
6.                 config.headers['Authorization']='JWT ' + window.sessionStorage.getItem('token')
7.         }
9.         // 每个请求发送之前都会执行该方法，并且会将请求配置对象传到该方法中
10.         console.log('请求拦截器：',config)
11.        
12.         // 在发送请求之前
13.         return config
14. });
17. // 响应拦截器:每个接口请求
18. http.interceptors.response.use(function(response){
19.         // 对响应数据做点什么
20.         console.log('响应拦截器：',response)
21.         // 在此处对项目中接口调用失败，做统一处理
22.         return response;
23.        
24. })

复制代码

---

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