http接口请求
（优点）与服务器通信，无刷新的获取数据——调用接口；缺点（无浏览历史、跨域问题、SEO不友好-爬虫爬不到）
应用场景：京东的二级菜单，百度的输入提示，注册用户名的校验（都不会刷新页面）、滚动到底发ajax请求新数据
应用方式：js原生写法、jquery、fetch、axios
请求报文
-请求报文
请求行（请求类型Get，url参数、http类型）；
请求头（host、cookie：name="gggpf"，content-type、user-agent：chrome）
空行
请求体（post请求，请求体可以不为空）
——响应报文
行 http1.1类型 请求码200
头 content-type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 /<html/>…</html>
简单express服务
// 1.引入express
const express = require('express')
// 2.创建应用对象
const app = express()
// 3.创建路由规则
app.get('/server', (req, rep)=>{
rep.setHeader('Access-Control-Allow-Origin', '*')
rep.send('sensss')
})
// 3.创建路由规则(all接受所有类型请求)
app.all('/serverPost', (req, rep)=>{
console.log(7777, 'www')
rep.setHeader('Access-Control-Allow-Origin', '*')
// 所有头信息都可以接受，包括自定义部分
rep.setHeader('Access-Control-Allow-Headers', '*')
rep.send('sensss post')
})
app.all('/json-server', (req, rep)=>{
const data = {
name: 'ddd', age: '22'
}
rep.setHeader('Access-Control-Allow-Origin', '*')
// 所有头信息都可以接受，包括自定义部分
rep.setHeader('Access-Control-Allow-Headers', '*')
rep.send(data)
})
// 4.监听端口，启动服务
app.listen(80, ()=>{
console.log('listen....')
})
原生的XMLHttpRequest对象
Let xhr = new XMLHttpRequest()
Xhr.open('GET', 'http://127.0.0.1:80/json-server')
Xhr.send('可以发送自定义响应体')
Xhr.timeout = 2000
Xhr.ontimeout = function (){
Alert('网络超时')
}
Xhr.onerror = function (){
Alert('网络错误')
}
xhr请求设置自定义响应体内容（xhr.setRequestHeader('my-type', 'ssdsds')）
需要再服务端适配（rep.setHeader('Access-Control-Allow-Headers', '*')）
对于一般的JSON对象数据，设置xhr.responseType="json"即可默认转为对象
小tip：IE缓存问题解决（在其中加个参数?t=Date.now()）,工具一般都会做
XMLHttpRequest mdn文档
详细参数见mdn文档：developer.mozilla.org/zh-CN/docs/… 一个新的api专题（属性、方法、事件 关注），分析应用场景即可
属性，多是一些状态信息，关注访问类型 readyState（只读）\status\statusText、timeout（可读写）
方法，多是与功能相关，open、send、setRequestHeader、getAllResponseHeaders、abort（取消未完成的请求）
事件，多是被触发的状态，onreadystatechange、onerror、ontimeout 对于本专题的返回参数是重点responseType，可取text、json、document、blob、arraybuffer等，需注意与服务端相对
jQuery的ajax请求(jquery中的ajax很多选项，可在jquery文档中查看)
// 按类别请求-简洁
$.get(url, {a:100, b:200}， function(data){console.log(data)}) $.post()
// 通用的ajax请求-通用
$.ajax({
url: '',
type: '',
data: '请求参数',
dataType: 'json',
success: function(data){
console.log(data)
},
timeout: 2000,
error: function(data){
console.log(data)
},
headers:{
a: 100,
b: 200
}
})
小tips: bootcdn-设置国内源的cdn（demo测试阶段使用）
axios（基于promise的xmlhttprequest） 一个ts的axios封装： juejin.cn/post/709088…
封装功能
请求通用配置（请求头）-跨域携带cookie、token、超时设置
请求守卫（发送请求、收到报文的通用校验处理-状态码报错等）
全局loading
统一文件处理
最简单实现部分
import axios from 'axios'
// 请求通用配置-跨域携带cookie、token、超时设置 创建axios实例
const service = axios.create({
//baseURL: 'http://ssss/', // api的base_url
// 自定义的请求头
headers: {
'Content-Type': 'application/json;charset=utf-8',
},
// 超时设置
timeout: 120000,
// 跨域是否带Token
withCredentials: false,
// 响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json'
})
// 请求守卫
service.interceptors.request.use(data=>{
// 做权限校验，或者拿到登录token才能调用接口
// 做头部字段添加
data.params = {
...data.params,
login_id: store.getters.userId,
power_depart_id: store.getters.powerDepartId,
}
return data
}, error=>{
Promise.reject(data)
})
// 响应守卫
service.interceptors.reponse.use(response=>{
switch (response.data.return_code) {
case 200 :
return response.data.data;
case "451":
return ''
}
return response
}, error=>{
// 仍可获得状态码 error.response.status
})
