axios官网: 易用、简洁且高效的http库

http说明

官网介绍

前后台请求过程

前后应用从浏览器端向服务器发送HTTP请求(请求报文)
后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
浏览器端接收到响应, 解析显示响应体/调用监视回调

axios使用 - 图1
axios使用 - 图2

请求报文

1). url: 可能带GET请求参数
2). method: 请求方式
3). headers: 多个请求头
    Host: www.baidu.com
    Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
    Content-Type: application/x-www-form-urlencoded
4). body: 请求体

仅有POST、PUT以及PATCH这三个动词时会包含请求体，而GET、HEAD、DELETE、CONNECT、TRACE、OPTIONS这几个动词时不包含请求体。
- GET: 从服务器端读取数据
- POST: 向服务器端添加新数据
- PUT: 更新服务器端已经数据
- DELETE: 删除服务器端数据
请求的格式 ```bash 1). Content-Type: application/x-www-form-urlencoded;charset=utf-8 用于键值对参数，参数的键值用=连接, 参数之间用&连接例如: name=%E5%B0%8F%E6%98%8E&age=12

2). Content-Type: application/json;charset=utf-8 用于json字符串参数例如: {“name”: “%E5%B0%8F%E6%98%8E”, “age”: 12}

3). Content-Type: multipart/form-data 用于文件上传请求


<a name="xUKxH"></a>
#### 请求头
| Header | 解释 | 示例 |
| --- | --- | --- |
| Accept | 指定客户端能够接收的内容类型 | Accept: text/plain, text/html,application/json |
| Accept-Charset | 浏览器可以接受的字符编码集。 | Accept-Charset: iso-8859-5 |
| Accept-Encoding | 指定浏览器可以支持的web服务器返回内容压缩编码类型。 | Accept-Encoding: compress, gzip |
| Accept-Language | 浏览器可接受的语言 | Accept-Language: en,zh |
| Accept-Ranges | 可以请求网页实体的一个或者多个子范围字段 | Accept-Ranges: bytes |
| Authorization | HTTP授权的授权证书 | Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== |
| Cache-Control | 指定请求和响应遵循的缓存机制 | Cache-Control: no-cache |
| Connection | 表示是否需要持久连接。（HTTP 1.1默认进行持久连接） | Connection: close |
| Cookie | HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。 | Cookie: $Version=1; Skin=new; |
| Content-Length | 请求的内容长度 | Content-Length: 348 |
| Content-Type | 请求的与实体对应的MIME信息 | Content-Type: application/x-www-form-urlencoded |
| Date | 请求发送的日期和时间 | Date: Tue, 15 Nov 2010 08:12:31 GMT |
| Expect | 请求的特定的服务器行为 | Expect: 100-continue |
| From | 发出请求的用户的Email | From: user@email.com |
| Host | 指定请求的服务器的域名和端口号 | Host: www.zcmhi.com |
| If-Match | 只有请求内容与实体相匹配才有效 | If-Match: “737060cd8c284d8af7ad3082f209582d” |
| If-Modified-Since | 如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码 | If-Modified-Since: Sat, 29 Oct 2010 19:43:31 GMT |
| If-None-Match | 如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变 | If-None-Match: “737060cd8c284d8af7ad3082f209582d” |
| If-Range | 如果实体未改变，服务器发送客户端丢失的部分，否则发送整个实体。参数也为Etag | If-Range: “737060cd8c284d8af7ad3082f209582d” |
| If-Unmodified-Since | 只在实体在指定时间之后未被修改才请求成功 | If-Unmodified-Since: Sat, 29 Oct 2010 19:43:31 GMT |
| Max-Forwards | 限制信息通过代理和网关传送的时间 | Max-Forwards: 10 |
| Pragma | 用来包含实现特定的指令 | Pragma: no-cache |
| Proxy-Authorization | 连接到代理的授权证书 | Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== |
| Range | 只请求实体的一部分，指定范围 | Range: bytes=500-999 |
| Referer | 先前网页的地址，当前请求网页紧随其后,即来路 | Referer: [http://www.zcmhi.com/archives...](http://www.zcmhi.com/archives/71.html) |
| TE | 客户端愿意接受的传输编码，并通知服务器接受接受尾加头信息 | TE: trailers,deflate;q=0.5 |
| Upgrade | 向服务器指定某种传输协议以便服务器进行转换（如果支持） | Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 |
| User-Agent | User-Agent的内容包含发出请求的用户信息 | User-Agent: Mozilla/5.0 (Linux; X11) |
| Via | 通知中间网关或代理服务器地址，通信协议 | Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1) |
| Warning | 关于消息实体的警告信息 | Warn: 199 Miscellaneous warning |
<a name="B4V1R"></a>
### 响应报文
```bash
1). 响应状态码: 200/404
2). 多个响应头
    Content-Type: text/html;charset=utf-8
    Set-Cookie: BD_CK_SAM=1;path=/
3). 响应体
    html文本/json文本/js/css/图片...

响应状态码

文档: https://www.runoob.com/http/http-status-codes.html

区间

1**    信息，服务器收到请求，需要请求者继续执行操作
2**    成功，操作被成功接收并处理
3**    需要进一步的操作以完成请求
4**    客户端错误，请求包含语法错误或无法完成请求
5**    服务器错误，服务器在处理请求的过程中发生了错误

常见的几个

200    OK                     请求成功。一般用于GET与POST请求
201 Created                已创建。成功请求并创建了新的资源
401 Unauthorized           未授权/请求要求用户的身份认证
404 Not Found              服务器无法根据客户端的请求找到资源
500 Internal Server Error  服务器内部错误，无法完成请求

API 分类

REST API:

发送请求进行CRUD哪个操作由请求方式来决定
同一个请求路径可以进行多个操作
请求方式会用到GET/POST/PUT/DELETE
非REST API:

请求方式不决定请求的CRUD操作
一个请求路径只对应一个操作
一般只有GET/POST

环境安装

NodeJs

# 安装 NVM
C:\Users\fulsun>scoop install nvm
# 使用 NVM 安装 NodeJs
C:\Users\fulsun>nvm list available
|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|   14.11.0    |   12.18.4    |   0.12.18    |   0.11.16    |
|   14.10.1    |   12.18.3    |   0.12.17    |   0.11.15    |
|   14.10.0    |   12.18.2    |   0.12.16    |   0.11.14    |
|    14.9.0    |   12.18.1    |   0.12.15    |   0.11.13    |
|    14.8.0    |   12.18.0    |   0.12.14    |   0.11.12    |
|    14.7.0    |   12.17.0    |   0.12.13    |   0.11.11    |
|    14.6.0    |   12.16.3    |   0.12.12    |   0.11.10    |
|    14.5.0    |   12.16.2    |   0.12.11    |    0.11.9    |
|    14.4.0    |   12.16.1    |   0.12.10    |    0.11.8    |
|    14.3.0    |   12.16.0    |    0.12.9    |    0.11.7    |
|    14.2.0    |   12.15.0    |    0.12.8    |    0.11.6    |
|    14.1.0    |   12.14.1    |    0.12.7    |    0.11.5    |
|    14.0.0    |   12.14.0    |    0.12.6    |    0.11.4    |
|   13.14.0    |   12.13.1    |    0.12.5    |    0.11.3    |
|   13.13.0    |   12.13.0    |    0.12.4    |    0.11.2    |
|   13.12.0    |   10.22.1    |    0.12.3    |    0.11.1    |
|   13.11.0    |   10.22.0    |    0.12.2    |    0.11.0    |
|   13.10.1    |   10.21.0    |    0.12.1    |    0.9.12    |
|   13.10.0    |   10.20.1    |    0.12.0    |    0.9.11    |
|    13.9.0    |   10.20.0    |   0.10.48    |    0.9.10    |
This is a partial list. For a complete list, visit https://nodejs.org/download/release
C:\Users\fulsun>nvm install 12.18.4
C:\Users\fulsun>nvm use 12.18.4
# 用来更改npm的镜像
C:\Users\fulsun>npm install nrm
C:\Users\fulsun>nrm ls
* npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
  taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/
C:\Users\fulsun>nrm test
* npm ---- 353ms
  yarn --- 373ms
  cnpm --- Fetch Error
  taobao - 300ms
  nj ----- Fetch Error
  npmMirror  1946ms
  edunpm - 4610ms
C:\Users\fulsun>nrm use taobao

json-server

用来快速搭建REST API的工具包： https://github.com/typicode/json-server
下载: npm install -g json-server

目标根目录下创建数据库json文件: db.json

{
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" }
  }

启动服务器

执行命令: json-server --watch db.json
浏览器测试访问 ```bash http://localhost:3000/posts http://localhost:3000/posts/1

结果

GET /posts 304 5.540 ms - - GET /posts/1 304 3.355 ms - -


<a name="O7eFk"></a>
### axios 引入
- 使用 npm: `$ npm install axios`
- 使用 bower: `$ bower install axios`
- 使用 cdn: `<script src="https://unpkg.com/axios/dist/axios.min.js">``</script>`[axios.min.js](https://www.yuque.com/attachments/yuque/0/2020/js/385886/1600827871274-1bd21d7a-b328-480d-8dd8-de7be25767d9.js?_lake_card=%7B%22status%22%3A%22done%22%2C%22source%22%3A%22transfer%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2020%2Fjs%2F385886%2F1600827871274-1bd21d7a-b328-480d-8dd8-de7be25767d9.js%22%2C%22name%22%3A%22axios.min.js%22%2C%22ext%22%3A%22js%22%2C%22size%22%3A14265%2C%22id%22%3A%22AjFjH%22%2C%22card%22%3A%22file%22%7D)
<a name="Njdfz"></a>
## axios的使用
- 例子
```javascript
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
  // 30分钟内不再发预检请求
  // axios.defaults.headers["Access-Control-Max-Age"] = "1800"
  /* 1. GET请求: 从服务器端获取数据*/
  function testGet() {
    // axios.get('http://localhost:3000/posts') // 获取所有posts的数组
    // axios.get('http://localhost:3000/posts/1') // 获取id为1的数组
    // axios.get('http://localhost:3000/posts?id=1&id=2') // 获取id为1或2的数组
    // axios.get('http://localhost:3000/posts?title=json-server&author=typicode')
  }
  testGet()
  /* 2. POST请求: 向服务器端添加新数据*/
  function testPost() {
    // axios.post('http://localhost:3000/comments', {body: 'xxx', postId: 1}) // 保存数据
  }
  testPost()
  /* 3. PUT请求: 更新服务器端已经数据 */
  function testPut() {
    // axios.put('http://localhost:3000/comments/4', {body: 'yyy', postId: 1})
  }
  testPut()
  /* 4. DELETE请求: 删除服务器端数据 */
  function testDelete() {
    // axios.delete('http://localhost:3000/comments/4')
  }
  testDelete()
</script>