VUE笔记（五）网络通信

一、axios的简介

1、什么是axios

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

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

特点：

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

• axios封装了XMLHttpRequest对象

• 支持Promise的API

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

• 自动转换JSON数据

• 取消请求

• 批量请求

2、安装axios

npm下载方式

npm install axios

CDN方式

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

二、axios的基本使用

1、axios的GET请求

axios({method:'请求方式',url:'请求的url',params:{//参数}
})

2、axios的POST请求

axios的POST的语法

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

3、axios的DELETE请求

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

4、axios的PUT请求

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

三、axios高级使用

1、axios的别名的使用

• GET方式

axios.get('请求的路径',{params:{//参数}
})

• POST方式

axios.post('请求的路径',{//参数
})

• DELETE方式

axios.delete('请求的路径',{data:{//参数}
})

• PUT方式

axios.put('请求的路径',{//参数
})

2、axios的文件上传

<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()//将文件设置到formDatafd.append("file",this.$refs.fileEle.files[0])//进行文件的上传功能,文件上传必须使用post请求//axios默认的Content-Type的值为application/jsonlet 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、文件上传进度的显示和取消请求

<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(){//创建FormDatalet 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中一次可以发送多个请求

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强大

<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中配置启动脚本

"scripts": {"serve": "vue-cli-service serve","production":"set NODE_ENV=production&vue-cli-service serve","build": "vue-cli-service build"},

• 在src目录下创建api目录，在该目录下创建request.js文件，具体的代码如下

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到请求头之中会比较麻烦

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

配置响应拦截器

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、目录解构

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

2、编写具体的业务代码

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文件中

import directors from "./modules/directors";
export default{directors
}

4、main.js中引入api.js

import api from '@/api/api'
//将api挂载到Vue的原型上
Vue.prototype.$api=api

5、组件中使用

 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依赖包

npm i qs

• 通过qs的stringify方法来进行转换

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、在请求拦截器中统一进行设置

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、语法

fetch(url).then(...).catch(...)

2.2 、案例

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

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的方式编写

 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）根据用户名称获取用户信息

 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请求

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