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方式

二、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的文件上传

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

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

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