网络请求

请求方式

网络请求查看：F12 ———> Fetch/XHR：过滤监测请求方式

1. 原生AJAX

const xhr = new XMLHttpRequest()

// get方法：只发送纯文本数据格式
/* xhr.open('GET', 'http:/wuyou.com/common/get?name=吴悠&age=18')
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText))
    }
} */

// post方法：可设置固定格式的请求头来设定数据格式
xhr.open('POST', 'http:/wuyou.com/common/post')
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=吴悠&age=18')
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText))
    }
} 

2. Axios

写法一：基本写法

// axios.get('http:/wuyou.com/common/get?name=吴悠&age=18')
(async () => {
    const res1 = await axios.get('http:/wuyou.com/common/get', {
        params: {
            name: '吴悠',
            age: '18'
        }
    })

    const res2 = await axios.post('http:/wuyou.com/common/post', {
        name: '吴悠',
        age: '18'
    })
    console.log(res2.data)
})

写法二：其他处理

(async () => {
    const ins = axios.create({  // 创建实例
        baseURL: 'http:/wuyou.com/common'
    })

    ins.interceptors.request.use(config => { // 请求拦截器
        console.log('发送了请求')  // 请求预处理
        return config    // 发送请求
    })

    ins.interceptors.response.use(res => { // 响应拦截器
        console.log('响应')  // 响应预处理
        return res    // 接收响应
    })

    const res1 = await ins.get('/get', {
        params: {
            name: '吴悠',
            age: '18'
        }
    })

    const res2 = await ins.post('/post', {
        name: '吴悠',
        age: '18'
    })
    console.log(res2.data)
})

3. Fetch Api

get请求

fetch('http:/wuyou.com/common/get?name=吴悠&age=18')
    .then(res => {
        if (res.ok) {
            return res.json()
        }
    })
    .then(data => {
        console.log(data)
    })

post请求

fetch('http:/wuyou.com/common/post', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        name: '吴悠',
        age: 18
    })
})
    .then(res => {
        if (res.ok) {
            return res.json()
        }
    })
    .then(data => {
        console.log(data)
    })

文件操作与上传

转换关系：

1. 二进制blob对象

blob：不可变的二进制内容，包含很多操作方法

files：通过input标签读过来的文件对象，前端对象【blob的子类】

使用实例：

<template>
    <input type="file" @change="fileChange" /><button @click="submit">提交</button>
</template>
<script>
import axios from 'axios'
export default {
    name: 'Input',
    data() {
        return  {
            
        }
    },
    method: {
        fileChange(e) {
            let file = e.target.files[0]
            if (file.size > 10*24*24) {
                alert("文件不能大于10兆")
            }
            if (file.type !== 'video/mp4') {
                alert("必须是mp4")
            }
            console.log(e.target.files[0])
        }
    }
}
</script>

blob和file可以互相转换：

let file = e.target.files[0]    // 完整代码见上
let _sliceBlob = new Blob([file]).slice(0, 5000)    // file转blob 
let _sliceFile = new File([_sliceBlob], "test.png")    // blob转file

formData：用于后端传输的对象

let _formData = new FormData()
_formData.append("user", "aasdasda")
_formData.append("file", _fileObj)
axios.post("/xx", _formData)

2. base64传输

fileReader：多用于把文件读取为某种形式，如base64、text文本【可以用来做缩略图 或 文本/缩略图预览】

let _fileObj
let fr = new FileRender()
fr.renderAsDataURL(_sliceFile)
fr.onload = function (){
    console.log(fr.result)
}