1 http的协议解释。 2 axios的8大请求 方式。axios 的create。axios的拦截器。axios的取消请求 。 3 axios的源码分析。
1 Http请求的基本过程:
客户端(浏览器)——————》服务器
1 请求行,请求头,请求体。
2 状态行,响应头,实体内容。
All,XHR(ajax请求,fetch函数),jS,CSS,
请求行:
method,url
GET,
PSOT、login
多个请求头:
Host:
Cookie:携带cookie浏览器。浏览器发请求的时候自带cookie。(携带两个BA=123E)
conten-type: application 或者application/ json(描述的是请求体)
请求体:(get没有,post可能有)(通过content-type来告诉,请求体的内容)
urlinlen的格式:username= tom&pwd=123
json格式:{“username":"tom","pwd":123}
相应报文:
1 相应状态行:status status Text
2 多个响应头:
content-type:text/html; charset= utf-8
set-cookie: bd-ck_sam=1 ; path=/
3 响应体:
html,json。js。css。图片。
post请求参数格式
4 content-type
5 context
6 content-type:multipart/form-
相应 状态码:
1.4 曾(post) 删(delete) 查(get) 改(put)。
GET:从服务端读取数据。
POST: 从服务器添加新数据。
PUT: 更新服务器的数据。
DELETE:删除服务器数据。
1.8API的分类:
1 API: restful:(发送请求到CRUD那个操作有请求方式来决定)
2非 REST API: restless(GET、post)
?id=1:查询id=1的是。
/1定位在某个对象
1.9.3使用浏览器访问测试。
只能访问get请求。
1.9.4 使用axios请求:
get: 查询访问。
post :增加
put:更新。
XHR(对象)可以和服务器交互,可以从url获取数据,无需和让整个页面。
AJAX变成中,XMLhttpRequest被大量使用!
http请求和 ajax的请求的区别?
浏览器一般干两个事情:发请求,接受信息
1 ajax 请求是一种特殊的http请求。
2 对于服务器来说,没有任何区。区别在浏览器端。
3 浏览器端发请求: 只有XHR或fetch才是ajax请求,其他所有的都是非ajax请求。
4 浏览器端接受到相应:
1 一般请求:浏览器一般会直接显示响应 应体数据,也就是我们常说的刷新跳转页面。
2 ajax请求: 浏览器不会对页面进行任何操作,只是监视的回调函数, 传入相应相应的数据,
2.4 API:
1 XMLHttpRequest()
2 status状态响应码: 状态响应码:200,404
3 statusTest:相应状态的文本
4 readyState:标识请求状态的只读属性
0:初始
1:open()之后
2: send()之后
3: 请求中
4:请求完成
5 open():初始化一个请求,参数为:(method,url[,async] )
6 send(data):发生请求
7 abort():中断请求
8 getResponHeader(name):
9 getAllResponseHeaders():
19 setRuestHeader(name,value):设置请求头部。
2.5 XHR的ajax的封装(简单的)
option :
axios的理解和使用:::
前端最流行的ajax的请求库。(之前是jq库里面包含的)
react和vue官方都推荐axios发ajax请求。
axios特点:
1 基于promise的异步 ajax请求库
2 浏览器和node端都可以使用。
3 支持请求,相应拦截器。
4 支持请求取消
5 请求 相应数据转换
6 批量发送多个请求。(promise也可以实现)
7 csfs网络安全
axios常用的语法:::
安装 npm install axios。 yarn add axios。 src= " ".
axios: axios.get
axios.create ([ ] )
const instance = axios.create ( 对象,但本身是个函数)
Resopn :
Config Defauls:默认配置:
axios.defaults.baseURL = ' http://api.example.com'
Interceptors:
请求拦截器。对某个事情 ,做一个统一的处理,放在拦截器里面去做,体现代码复用的思想。
请求取消。
axios 常用语法::::
1 get post put delete
axios.get ('/posts/?id=1')
axios.get(' posts' {
id:'2'
name:'abc'
})
axios.get({
url: 'post/[post'
params:{id=1} .then() .catch()
2 axios.create(config)
因为 项目有部分接口需要的配置和另一部分的接口配置不太一样。如何处理!!!
解决:创新2个新的axios,每个有自己的配置,放在不同要求的接口请求中!
script
const instance = axios.create({
baseURL= 'http://localhost:3000'
})
使用instance发请求
instance({
url:'/xxx'
})
script
场景:前端请求:请求ajax到后台,后台有2-3个应用,有2,30个接口
解决办法: axios请求,axios.defaults.baseURL。instance的vaseURL默认。instance,get(),axios.get().
axios.defaults.baseURL = 'http://localhost:3000'
// 使用axios发请求
axios({
url: '/posts' // 请求3000
})
// axios({
// url: '/xxx' // 请求4000
// })
const instance = axios.create({
baseURL: 'http://localhost:4000'
})
// 使用instance发请求
// instance({
// url: '/xxx' // 请求4000
// })
instance.get('/xxx')
interceptors 拦截器及运行流程!
//添加请求拦截器(回调函数)
axios.interceptors.request.user(
config = >{
console.log( '成功的onResoleved()')
return config
},
error=>{
console.log('request error onRejected()')
returnPromise.reject(error);
}
// 添加响应拦截器:
axios.interceptors.respons.use({
config = >{
console.log( '成功的 intercept2 onResoleved()')
return config
},
error=>{
console.log('request intercept2 error onRejected()')
returnPromise.reject(error);
})
请求get axios.get().then.catch
1request 请求拦截器,后添加,先执行
2 response 响应拦截器:
3 then().catch()
promise连接链。就靠promise把他串联起来!!
3.4.3 取消请求:::
1 基本流程:
配置canceTpken
2 实现功能:
两种写法:1axios.get ( ' /user/123 ', { cancelToken: new axios.CancelToken ( function executor(c) { cacel =c } }
//c适用于取消当前请求的函数。保存取消i函数,用于zhi之后可能需要请求当前的请求。
3.5 源码分析:::
vue打包都是dist ,但是react打包却是 bulid。
examples
index.js 入口.lib/axios
lib文件。adpters