VUE笔记（五）网络通信

鸣鲷有柒2023-08-27 10:09

一、axios的简介

1、什么是axios

文档：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

概念：axios是一个基于Promise的网络请求库，可以用于浏览器和node.js

特点：

  • 使用简单,包尺寸小且提供了易于扩展的接口

  • axios封装了XMLHttpRequest对象

  • 支持Promise的API

  • 可以配置拦截器来实现请求的拦截和响应拦截

  • 自动转换JSON数据

  • 取消请求

  • 批量请求

2、安装axios

npm下载方式

javascript 复制代码 
npm install axios

CDN方式

javascript 复制代码 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

二、axios的基本使用

1、axios的GET请求

javascript 复制代码 
axios({
    method:'请求方式',
    url:'请求的url',
    params:{
        //参数
    }
})

2、axios的POST请求

axios的POST的语法

javascript 复制代码 
axios({
    method:'POST',
    url:'请求的地址',
    data:{
        //参数
    }
})

3、axios的DELETE请求

javascript 复制代码 
axios({
    method:'DELETE'
    url:'请求的地址',
    data:{
        //参数
    }
})
4、

4、axios的PUT请求

javascript 复制代码 
axios({
    method:'PUT'
    url:'请求的地址',
    data:{
        //参数
    }
})

三、axios高级使用

1、axios的别名的使用

  • GET方式
javascript 复制代码 
axios.get('请求的路径',{
    params:{
        //参数
    }
})
  • POST方式
javascript 复制代码 
axios.post('请求的路径',{
    //参数
})
  • DELETE方式
javascript 复制代码 
axios.delete('请求的路径',{
    data:{
        //参数
    }
})
  • PUT方式
javascript 复制代码 
axios.put('请求的路径',{
    //参数
})

2、axios的文件上传

javascript 复制代码 
<template>
    <div>
        <h1>图片上传</h1>
        <input type="file" ref="fileEle" @change="uploadImage"><br>
        <img :src="imagePath" alt="" style="width:150px;height:180px">
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            imagePath:'https://img0.baidu.com/it/u=2758702403,628714391&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
        }
    },
    methods:{
        async uploadImage(){
            //创建formData对象
            let fd=new FormData()
            //将文件设置到formData
            fd.append("file",this.$refs.fileEle.files[0])
            //进行文件的上传功能,文件上传必须使用post请求
            //axios默认的Content-Type的值为application/json
            let result=await axios.post('http://www.zhaijizhe.cn:3005/images/uploadImages',fd,{
                headers:{
                    'Content-Type':'multipart/form-data'
                }
            })
            console.log(result.data.data[0]);
            this.imagePath=`http://www.zhaijizhe.cn:3005/${result.data.data[0]}`
        }
    }
}
</script>

3、文件上传进度的显示和取消请求

javascript 复制代码 
<template>
   <div>
        <h1>文件上传</h1>
         <div>
            <input type="file" @change="uploadBigFile" ref="fileEle">
            <button @click="stopUpload">取消上传</button>
         </div>

        <div>
            {{progress}}%
        </div>
        <div :style="`width:${progress}px;height:10px;background-color:red`"></div>
   </div>
</template>

<script>
import axios from 'axios'
//从axios中解构
const {CancelToken,isCancel}=axios
export default {
    data(){
        return{
            progress:0
        }
    },
    methods:{
        async uploadBigFile(){
            //创建FormData
            let fd=new FormData()
            fd.append('file',this.$refs.fileEle.files[0])
            /* 
                调用axios来实现文件上传
            */
           let result=await axios({
            method:'POST',
            url:'http://www.zhaijizhe.cn:3005/images/uploadImages',
            data:fd,
            headers:{
                'Content-Type':'application/multipart/form-data'
            },
            //来完成上传进度回调函数
            onUploadProgress:e=>{
                console.log(Number(e.progress*100).toFixed(2)+"%");
                this.progress=Number(e.progress*100).toFixed(2)
            },
            //取消上传的回调
            cancelToken:new CancelToken(c=>{
                this.cancel=c
            })
           }).catch(err=>{
             if(isCancel(err)){
                console.log('上传已经取消，取消的原因',err);
             }
           })
        },
        stopUpload(){
            if(this.cancel){
                this.cancel()
            }
        }
    }
}
</script>

<style>

</style>

4、axios的批量请求

在axios中一次可以发送多个请求

javascript 复制代码 
import axios from 'axios'
export default {
    methods:{
        async batchRequest(){
            let result=await axios.all([
                axios.get('http://www.zhaijizhe.cn:3005/students/getStudents'),
                axios.get('http://www.zhaijizhe.cn:3005/classes/getClasses'),
                axios.get('http://www.zhaijizhe.cn:3005/directors/getDirectors')
            ])
            console.log(result);
        }
        
    }
}

5、axios的create方法

假设一种场景就是我们一个前端项目可能向多个后端发送请求，就需要多个axios实例，可以使用create方法为axios创建一个新实例，这个实例功能叫axios原本这个实例，功能没有原本axios强大

javascript 复制代码 
<template>
   <div>
      <h1>axios的create方法的使用</h1>
      <button @click="getStudents1">查询学生信息(3005)</button>
      <button @click="getDirector1">查询班主任信息(3005)</button>
      <hr>
      <button @click="getStudents2">查询学生信息(3000)</button>
   </div>
</template>

<script>
import axios from 'axios'
//为axios设置基础路径
axios.defaults.baseURL="http://www.zhaijizhe.cn:3005"
//设置超时时间5000
axios.defaults.timeout=50000
//可以使用axios的create方法重新创建一个axios实例
let service=axios.create({
    baseURL:'http://47.98.128.191:3000',
    timeout:6000
})
export default {
    methods:{
        async getStudents1(){
          let result= await axios({
            method:'GET',
            url:'/students/getStudents'
          })
          console.log(result.data.data);
        },
        async getDirector1(){
            let result=await axios({
                method:'GET',
                url:'/directors/getDirectors'
            })
            console.log(result.data.data);
        },
        async getStudents2(){
            let result= await service({
                method:'GET',
                url:'/students/getStudents'
            })
            console.log(result);
        }
    }
}
</script>

<style>

</style>

四、axios的二次封装

1、设置基础路径

在实际开发场景我们将开发环境分为三种场景

  • 开发环境：所谓的开发环境是指程序员在开发阶段所使用的环境称为开发环境

  • 测试环境：程序在测试阶段使用使用的环境被称为测试环境

  • 生产环境：程序上线部署的环境

在配置环境，在启动的时候输入不同的命令启动不同的环境

实验：分别由三套环境 开发环境: http://localhost:3005

测试环境: http://47.98.128.191

生产环境: Express

  • 进入到package.json中配置启动脚本
javascript 复制代码 
"scripts": {
    "serve": "vue-cli-service serve",
    "production":"set NODE_ENV=production&vue-cli-service serve",
    "build": "vue-cli-service build"
 },
  • 在src目录下创建api目录，在该目录下创建request.js文件，具体的代码如下
javascript 复制代码 
import axios from 'axios'
//根据启动命令来决定目前使用什么环境
function getBaseURL(){
    switch(process.env.NODE_ENV){
        case 'production':
            return "http://www.zhaijizhe.cn:3005"
        default:
            return "http://47.98.128.191:3000"
    }
}
const service=axios.create({
    baseURL:getBaseURL()
})
export default service

2、axios的拦截器的设置

axios的拦截器分为请求拦截器和响应拦截器

请求拦截器常见的操作就是携带token,如果再发送请求的时候给每一个请求携带token到请求头之中会比较麻烦

javascript 复制代码 
//设置请求拦截器
service.interceptors.request.use(config=>{
    //设置请求拦截器
    //携带token信息
    config.headers['Authorization']="Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MGNiMDA3M2I4NGRjNWVlZGUwOWRkNzkiLCJpYXQiOjE2Njk3MTU1OTcsImV4cCI6MTY2OTcxNzM5N30.g3T5hj75XfaLhYRiNeib-aud-5X_Yw-oc9WsDbZb7TQ"
    return config
})

配置响应拦截器

javascript 复制代码 
service.interceptors.response.use(response=>{
    console.log('-----------正常进到响应拦截器里了--------------');
    console.log('response',response);
    //如果要将数据从响应拦截器返回到发送请求的回调中，需要使用return将这个返回对象返回
    return response.data
},err=>{
    if(err.response){
        switch(err.response.status){
            case 401:
                alert('您的token已经失效，请重新登录')
                break;
            case 404:
                alert('您输入的地址有误,请检查您的URL地址')
                break;
            case 500:
                alert('您的服务器有误，请与管理员联系')
                break
        }
    }else if(!window.navigator.onLine){
        alert('您的网络已断开，请检查')
    }
})

五、axios的规范化和模块化

1、目录解构

javascript 复制代码 
|-src
	|-api
	  |-modules
		 |-users.js:完成所有关于用户模块的网络请求的api
         |-classes.js:完成所有关于班级模块的网络请求的api
         |-...
       |-api.js:对所有模块进行汇总的js
       |-request.js:axios二次封装后的网络请求库

2、编写具体的业务代码

javascript 复制代码 
import request from '@/api/request'
//获取所有班主任的信息
const getDirectors=(params)=>{
    return request({
        method:'GET',
        url:'/directors/getDirectors',
        params
    })
}
//获取所有班主任信息的简写形式
//const getDirectors1=()=>request.get('/directors/getDirectors',{params})

//新增班主任的信息
const addDirector=(data)=>{
    return request({
        method:'POST',
        url:'/directors/addDirectors',
        data
    })
}
//删除班主任信息
const deleteDirector=(_id)=>{
    return request({
        method:'DELETE',
        url:'/directors/deleteDirectors',
        data:{_id}
    })
}
//修改班主任信息
const updateDirectors=(data)=>{
    return request({
        method:'PUT',
        url:'/directors/updateDirectors',
        data 
    })
}

export default {
    getDirectors,
    addDirector,
    deleteDirector,
    updateDirectors
}

3、汇总模块到api.js文件中

javascript 复制代码 
import directors from "./modules/directors";
export default{
    directors
}

4、main.js中引入api.js

javascript 复制代码 
import api from '@/api/api'
//将api挂载到Vue的原型上
Vue.prototype.$api=api

5、组件中使用

javascript 复制代码 
 async getDirectors(){
      const result=await this.$api.directors.getDirectors(this.query)
      this.list=result.data.result
 }

六、qs.stringify的使用

Content-Type

  • application/x-www-form-urlencode

  • application/json:(axios默认的方式)

  • application/multipart/form-data

如何将JSON数据变成表单格式的数据，方式有两种

  • 如果少量的接口可以使用:qs.stringify()

  • 如果整个项目都是表单格式：可以配置拦截器

1、qs.stringify()方法

  • 下载qs依赖包
javascript 复制代码 
npm i qs
  • 通过qs的stringify方法来进行转换
javascript 复制代码 
import request from '@/api/request'
import qs from 'qs'

const login=(data)=>{
    return request({
        method:'POST',
        url:'/login',
        data:qs.stringify(data)
    })
}
export default{
    login
}

注意：如果整个项目都是表单格式的数据，使用此方法会每次都要转换开发效率较低

2、在请求拦截器中统一进行设置

javascript 复制代码 
service.interceptors.request.use(config=>{
    config.headers['Content-Type']="application/x-www-form-urlencoded"
    return config
})

七、Fetch API

1、什么是Fetch API

Fetch被称为下一代Ajax技术，内部采用Promise方式来处理数据

FethAPI主要有如下特点

  • API语法更加简洁

  • 采用模块化设计，API分散到多个对象中

  • 采用Promise方式处理数据，避免回调地狱

    axios和fetch的不同

    1、axios底层依然是XMLHttpRequest方式，但是fetch的通讯类型是新的类型称为fetch

    2、axios实际上是封装XMLHttpRequest方法，使用的时候必须要下载axios的依赖库，然后才能使用,但是fetch是js的原生提供的，不需要导入新的依赖包

    3、发送请求的参数为body，而且还要程序员自己将json对象转成JSON字符串

    总结: fetch和axios比较起来无任何优势。

2、使用Fetch API发送GET请求

2.1、语法
javascript 复制代码 
fetch(url).then(...).catch(...)
2.2 、案例

1）获取所有学生列表信息

javascript 复制代码 
created(){
    fetch("http://www.zhaijizhe.cn:3005/students/getStudents").then(res=>{
        return res.json()
    }).then(res=>{
        this.students=res.data.result
    }).catch(err=>{
         console.log(err);
    })
 }

使用async/await的方式编写

javascript 复制代码 
 methods:{
   async getStudentsData(){
       let res=await fetch('http://www.zhaijizhe.cn:3005/students/getStudents')
            let {data:{result}}=await res.json()
            this.students=result
   }
},
created(){
   this.getStudentsData()
}

2）根据用户名称获取用户信息

javascript 复制代码 
 methods:{
   async getStudentsData(){
            let res=await fetch('http://www.zhaijizhe.cn:3005/students/getStudents?type=name&value=郭佳俊')
            let {data:{result}}=await res.json()
            console.log(result);
            this.students=result
   }
},
created(){
        this.getStudentsData()
}

3、使用Fetch API发送POST请求

javascript 复制代码 
export default {
    data(){
        return{
            student:{
                name:'zhaijizhe',
                age:38,
                gender:'男',
                imagePath:'http://www.zhaijizhe.cn:3005/images/1662264356815.webp',
                subjectsId:'60bf18ce9efaab9c2327c982',
                classesId:'60bf18fc9efaab9c2327c988'
            }
        }
    },
    methods:{
        async addStudent(){
            let res=await fetch('http://www.zhaijizhe.cn:3005/students/addStudents',{
                method:'post',
                headers:{
                    'Content-Type':'application/json'
                },
                body:JSON.stringify(this.student)
            })
            let result=await res.json()
            console.log(result);
        }
    }
}
相关推荐
橙子家6 小时前
浏览器缓存之【结构化数据库与缓存】： IndexedDB、Cache storage 和 Storage buckets
前端
user20585561518136 小时前
X6 中边悬浮置顶，规避 `mouseleave` 事件丢失问题
前端
李明卫杭州6 小时前
CSS aspect-ratio 属性完全指南
前端
Pedantic8 小时前
SwiftUI 手势层级（Gesture Hierarchy）详解
前端
飘尘8 小时前
前端转型全栈（Java后端）的快速上手指引
前端·后端·全栈
一颗烂土豆8 小时前
Meshopt 压缩深度解析，为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师9 小时前
AI Agent 接浏览器任务，先别让它一路点到底
前端·后端
雨季mo浅忆9 小时前
VSCode自动格式化三要素
前端
爱勇宝10 小时前
深扒 Anthropic 1680 位工程师简历：应届生几乎没机会，AI 公司最缺的不是博士
前端·后端·程序员
热门推荐
012026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04【AI】2026 年具身智能模型和世界模型总结05GitHub 镜像站点06AI科技热点日报 | 2026年6月1日07AI一周事件 · 2026-06-03 至 2026-06-09082026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？09Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析10上线仅72小时被强制下架：Claude Fable 5 的短命