axios-http,ajax的封装,axios的使用

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 常用语法::::

        axios.defaults.baseURL = 'http://localhost:3000'
 

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

## 1. 源码目录结构
├── /dist/                     # 项目输出目录
├── /lib/                      # 项目源码目录
│ ├── /adapters/               # 定义请求的适配器 xhr、http
│ │ ├── http.js                # 实现http适配器(包装http包)
│ │ └── xhr.js                 # 实现xhr适配器(包装xhr对象)
│ ├── /cancel/                 # 定义取消功能
│ ├── /core/                   # 一些核心功能
│ │ ├── Axios.js               # axios的核心主类
│ │ ├── dispatchRequest.js     # 用来调用http请求适配器方法发送请求的函数
│ │ ├── InterceptorManager.js  # 拦截器的管理器
│ │ └── settle.js              # 根据http响应状态,改变Promise的状态
│ ├── /helpers/                # 一些辅助方法
│ ├── axios.js                 # 对外暴露接口
│ ├── defaults.js              # axios的默认配置 
│ └── utils.js                 # 公用工具
 
 
├── package.json               # 项目信息
├── index.d.ts                 # 配置TypeScript的声明文件
└── index.js                   # 入口文件
 
 
原文地址:https://www.cnblogs.com/hacker-caomei/p/14358319.html