VUE笔记（五）网络通信

一、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);
        }
    }
}