【vue】利用axios发送请求

ゝ一世哀愁。 2024-03-02 10:31 142阅读 0赞

这里写目录标题

  • 一、项目环境配置
  • 二、利用axios发送POST请求登录
  • 三、异步实现：利用axios发送POST请求登录（json）
  • 四、异步实现：利用axios发送POST请求登录（表单）
  • 五、token存储
  • 六、token使用
  • 七、全局的axios配置
    • 1、方式一
    • 2、方式二
  • 八、请求拦截器和响应拦截器

一、项目环境配置

根组件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{
  27.         data(){
  29.             return{
  31.                 loginForm:{
  33.                     username:"",
  34.                     password:""
  35.                 }
  36.             }
  37.         },
  38.         methods:{
  40.             // 点击登录执行的方法
  41.             submitLogin(){
  43.                 console.log('点击了登录,',this.loginForm)
  44.                 // 点击了登录如何发送http请求？axios
  45.                 const params={
  47.                     username:this.loginForm.username,
  48.                     password:this.loginForm.password
  49.                 }
  50.                 // 登录的post请求
  51.                 const res = axios.post('http://82.156.178.247:5001/users/login/',params)
  52.                 console.log('res',res)
  54.                 // 设置回调函数，接收返回的响应对象
  55.                 // 异步操作成功时，执行的回调函数
  56.                 res.then(response=>{
  58.                     console.log('请求成功:')
  59.                     console.log('respnse',response)
  60.                 })
  61.                 // 异步操作失败时，执行的回调函数
  62.                 res.catch(error=>{
  64.                     console.log('请求失败:')
  65.                     // console.log('error:',error)
  66.                     console.log('请求失败响应对象获取',error.response)
  67.                 })
  68.             }
  69.         }
  70.     }
  72. </script>
  74. <style>
  76. </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{
  27.         data(){
  29.             return{
  31.                 loginForm:{
  33.                     username:"",
  34.                     password:""
  35.                 }
  36.             }
  37.         },
  38.         methods:{
  40.             // 点击登录执行的方法
  41.             async submitLogin(){
  43.                 const params={
  45.                     username:this.loginForm.username,
  46.                     password:this.loginForm.password
  47.                 }
  48.                 // 登录的post请求
  49.                 const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
  50.                 console.log('response:',response)
  51.                 // 对响应信息进行判断
  52.                 if (response.status===200){
  54.                     this.$message({
  56.                         type:"success",
  57.                         message:"登录成功"
  58.                     });
  59.                     // 跳转
  60.                     this.$router.push({
  61.     name:"index"})
  62.                 }
  63.             },
  65.         }
  66.     }
  68. </script>
  70. <style>
  72. </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{
  27.         data(){
  29.             return{
  31.                 loginForm:{
  33.                     username:"",
  34.                     password:""
  35.                 }
  36.             }
  37.         },
  38.         methods:{
  40.             // 点击登录执行的方法
  41.             async submitLogin(){
  43.                 // axios发送表单格式的请求
  44.                 const params = qs.stringify(this.loginForm)
  45.                 // 登录的post请求
  46.                 const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
  47.                 console.log('response:',response)
  48.                 // 对响应信息进行判断
  49.                 if (response.status===200){
  51.                     this.$message({
  53.                         type:"success",
  54.                         message:"登录成功"
  55.                     });
  56.                     // 跳转
  57.                     this.$router.push({
  58.     name:"index"})
  59.                 }
  60.             },
  62.         }
  63.     }
  65. </script>
  67. <style>
  69. </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{
  27.         data(){
  29.             return{
  31.                 loginForm:{
  33.                     username:"",
  34.                     password:""
  35.                 }
  36.             }
  37.         },
  38.         methods:{
  40.             // 点击登录执行的方法
  41.             async submitLogin(){
  43.                 // axios发送json格式的请求
  44.                 const params={
  46.                     username:this.loginForm.username,
  47.                     password:this.loginForm.password
  48.                 }
  49.                 // 登录的post请求
  50.                 const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
  51.                 console.log('response:',response)
  52.                 // 对响应信息进行判断
  53.                 if (response.status===200){
  55.                     this.$message({
  57.                         type:"success",
  58.                         message:"登录成功"
  59.                     });
  60.                     // 跳转
  61.                     this.$router.push({
  62.     name:"index"})
  63.                     // 保存登录返回的token
  64.                     // 获取token
  65.                     const token=response.data.token
  66.                     // 保存到LocalStorage中
  67.                     // window.localStorage.setItem('token',token)
  68.                     // // 保存到sessionStorage中
  69.                     // window.sessionStorage.setItem('token',token)
  70.                     // 保存到cookie中
  71.                     window.cookieStore.set('token',token)
  72.                 }
  73.             },
  75.         }
  76.     }
  78. </script>
  80. <style>
  82. </style>

六、token使用

  1. <template>
  2.     <h1>index页面</h1>
  3.     <el-button @click="getAllProject">获取项目数据</el-button>
  5.     <h3>{
  6.     {
  7.     pros}}</h3>
  8. </template>
  10. <script>
  11. import axios from 'axios'
  13.     export default{
  15.         data(){
  17.             return{
  19.                 pros:{
  22.                 }
  23.             }
  24.         },
  25.         methods:{
  27.             async getAllProject(){
  29.                 // 发送请求
  30.                 const url="http://82.156.178.247:5001/projects/"
  31.                 const response=await axios.get(url,{
  33.                     headers:{
  35.                         'Authorization':'JWT ' + window.sessionStorage.getItem('token')
  36.                     }
  37.                 });
  38.                 console.log('response',response);
  39.                 this.pros=response.data
  40.             }
  41.         }
  42.     }
  43. </script>
  45. <style>
  46. </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)=>{
  11.     axios.post('/login',params)
  12. }
  14. export const getALLPro=()=>{
  16.     axios.get('/login')
  17. }

2、方式二

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

在main.js中导入index.js，作为全局对象，方便以后的开发项目中使用
$api为属性名称
在这里插入图片描述

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

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

发表评论

表情：
评论列表 （有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读