学网站开发与维护有用吗,专业的广州手机网站建设,哪些网站可以做微课,成全高清免费观看mv一、axios的简介
1、什么是axios
文档#xff1a;Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库#xff0c;可以用于浏览器和 node.js
概念#xff1a;axios是一个基于Promise的网络请求库#xff0c;可以用于浏览器和node.js
特点#xff…一、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 srchttps://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:DELETEurl:请求的地址,data:{//参数}
})
4、
4、axios的PUT请求
axios({method:PUTurl:请求的地址,data:{//参数}
})
三、axios高级使用
1、axios的别名的使用 GET方式
axios.get(请求的路径,{params:{//参数}
}) POST方式
axios.post(请求的路径,{//参数
}) DELETE方式
axios.delete(请求的路径,{data:{//参数}
}) PUT方式
axios.put(请求的路径,{//参数
})
2、axios的文件上传
templatedivh1图片上传/h1input typefile reffileEle changeuploadImagebrimg :srcimagePath alt stylewidth:150px;height:180px/div
/templatescript
import axios from axios
export default {data(){return{imagePath:https://img0.baidu.com/it/u2758702403,628714391fm253fmtautoapp138fJPEG?w400h400}},methods:{async uploadImage(){//创建formData对象let fdnew FormData()//将文件设置到formDatafd.append(file,this.$refs.fileEle.files[0])//进行文件的上传功能,文件上传必须使用post请求//axios默认的Content-Type的值为application/jsonlet resultawait axios.post(http://www.zhaijizhe.cn:3005/images/uploadImages,fd,{headers:{Content-Type:multipart/form-data}})console.log(result.data.data[0]);this.imagePathhttp://www.zhaijizhe.cn:3005/${result.data.data[0]}}}
}
/script
3、文件上传进度的显示和取消请求
templatedivh1文件上传/h1divinput typefile changeuploadBigFile reffileElebutton clickstopUpload取消上传/button/divdiv{{progress}}%/divdiv :stylewidth:${progress}px;height:10px;background-color:red/div/div
/templatescript
import axios from axios
//从axios中解构
const {CancelToken,isCancel}axios
export default {data(){return{progress:0}},methods:{async uploadBigFile(){//创建FormDatalet fdnew FormData()fd.append(file,this.$refs.fileEle.files[0])/* 调用axios来实现文件上传*/let resultawait 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.progressNumber(e.progress*100).toFixed(2)},//取消上传的回调cancelToken:new CancelToken(c{this.cancelc})}).catch(err{if(isCancel(err)){console.log(上传已经取消取消的原因,err);}})},stopUpload(){if(this.cancel){this.cancel()}}}
}
/scriptstyle/style
4、axios的批量请求
在axios中一次可以发送多个请求
import axios from axios
export default {methods:{async batchRequest(){let resultawait 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强大
templatedivh1axios的create方法的使用/h1button clickgetStudents1查询学生信息(3005)/buttonbutton clickgetDirector1查询班主任信息(3005)/buttonhrbutton clickgetStudents2查询学生信息(3000)/button/div
/templatescript
import axios from axios
//为axios设置基础路径
axios.defaults.baseURLhttp://www.zhaijizhe.cn:3005
//设置超时时间5000
axios.defaults.timeout50000
//可以使用axios的create方法重新创建一个axios实例
let serviceaxios.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 resultawait 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);}}
}
/scriptstyle/style
四、axios的二次封装
1、设置基础路径
在实际开发场景我们将开发环境分为三种场景 开发环境所谓的开发环境是指程序员在开发阶段所使用的环境称为开发环境 测试环境程序在测试阶段使用使用的环境被称为测试环境 生产环境程序上线部署的环境
在配置环境在启动的时候输入不同的命令启动不同的环境
实验分别由三套环境 开发环境: http://localhost:3005
测试环境: http://47.98.128.191
生产环境: Express 进入到package.json中配置启动脚本
scripts: {serve: vue-cli-service serve,production:set NODE_ENVproductionvue-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:3005default:return http://47.98.128.191:3000}
}
const serviceaxios.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-oc9WsDbZb7TQreturn 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.$apiapi
5、组件中使用 async getDirectors(){const resultawait this.$api.directors.getDirectors(this.query)this.listresult.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 qsconst 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-urlencodedreturn 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.studentsres.data.result}).catch(err{console.log(err);})}
使用async/await的方式编写 methods:{async getStudentsData(){let resawait fetch(http://www.zhaijizhe.cn:3005/students/getStudents)let {data:{result}}await res.json()this.studentsresult}
},
created(){this.getStudentsData()
}
2根据用户名称获取用户信息 methods:{async getStudentsData(){let resawait fetch(http://www.zhaijizhe.cn:3005/students/getStudents?typenamevalue郭佳俊)let {data:{result}}await res.json()console.log(result);this.studentsresult}
},
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 resawait fetch(http://www.zhaijizhe.cn:3005/students/addStudents,{method:post,headers:{Content-Type:application/json},body:JSON.stringify(this.student)})let resultawait res.json()console.log(result);}}
}
