axios学习笔记

11/26/2020 JavaScriptAxiosPromise

# 文章目录

# 一、什么是 axios?

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
中文文档:axios 中文文档 (opens new window)

# 1.1 特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 请求拦截和响应拦截
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

# 1.2 常用 http 请求

增 POST 删 DELETE 改 PUT 查 GET

  1. GET:从服务器端读取数据
  2. POST:向服务器端添加新数据
  3. PUT:更新服务器端已经数据
  4. DELETE:删除服务器端数据

# 二、axios 的基本使用

使用 axios 需要先引入或者安装,本文默认你已经引入 axios

CDN 地址:

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
1

NPM:

npm install -g axios
1

# 2.1 搭建服务器

这里我们使用 JSON-Server这个,他能帮助我们在极短的时间内搭建一个 REST API 接口。

GitHub 地址:JSON-Server (opens new window)

安装 JSON Server:

npm install -g json-server
1

Create a db.json file with some data:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
1
2
3
4
5
6
7
8
9

Start JSON Server:

json-server --watch db.json
1

经过以上步骤我们在 本地的 http://localhost:3000就开启了一个 REST API,便于我们测试。

# 2.1 普通方式 GET 无参

这里我们配置一下默认路径,下文默认你已经配置

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

默认请求方式即是 GET。

axios.defaults.baseURL = "http://localhost:3000";
axios({
  url: "posts",
  method: "GET", // default
}).then((value) => {
  console.log(value.data);
});

//语法糖形式:
axios.get("/posts").then((value) => {
  console.log(value.data);
});
1
2
3
4
5
6
7
8
9
10
11
12

output:
在这里插入图片描述

# 2.2 普通方式 GET 有参

我们先在 db.json 增加一些内容,增加后如下:

{
  "posts": [
    {"id": 1,"title": "json-server","author": "typicode"},
    {"id": 2,"title": "盲僧","author": "张三"},
    {"id": 3,"title": "瑞文","author": "李四"},
    {"id": 4,"title": "亚索","author": "王五"}
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

请求方式:

axios({
  // 方式一
  // url: 'posts?id=2',

  // 方式二:
  url: "posts",
  params: {
    id: 2,
  },
  method: "GET", // default
}).then((value) => {
  console.log(value.data);
});
//语法糖形式:
axios
  .get("/posts", {
    params: {
      id: 2,
    },
  })
  .then((value) => {
    console.log(value.data);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

output:
在这里插入图片描述

# 2.3 POST 有参数

axios({
  url: "posts",
  method: "POST",
  data: {
    title: "寒冰",
    author: "设计师",
  },
}).then((value) => {
  console.log(value.data);
});
1
2
3
4
5
6
7
8
9
10

发送后 db.json 文件就会多出来一个数据,如下:
在这里插入图片描述
id 是自动增加的。

# 2.4 并发请求

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
  </head>

  <body>
    <button class="btn btn-primary">并发请求</button>
    <script>
      axios.defaults.baseURL = "http://127.0.0.1:3000";

      let btn = document.querySelector("button");
      btn.onclick = function() {
        axios
          .all([
            axios.get("/posts"),
            axios.get("/posts", {
              params: {
                id: 4,
              },
            }),
          ])
          .then((value) => {
            console.log(value);
          })
          .catch((reason) => {
            console.log(reason);
          });
      };
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

结果:
在这里插入图片描述

# 三、axios 实例

const instance = axios.create({
  baseURL: "http://127.0.0.1:8000",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

instance({
  url: "posts",
  method: "GET", // default
}).then((value) => {
  console.log(value.data);
});

instance.get("/posts").then((value) => {
  console.log(value.data);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 四、 Vue 二次封装 axios

# 4.1 首先封装 axios

方式一:

request.js

import axios from "axios";

// 封装 axios
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: "http://127.0.0.1:8000/api",
    timeout: 5000,
  });

  // 2.axios的拦截器

  // 2.1 请求拦截
  instance.interceptors.request.use(
    (config) => {
      return config;
    },
    (err) => {
      console.log(err);
    }
  );

  // 2.2 响应拦截
  instance.interceptors.response.use(
    (res) => {
      return res.data;
    },
    (err) => {
      console.log(err);
    }
  );

  // 3.发送真正的网络请求 axios本身返回Promise
  return instance(config);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

方式二:

import axios from "axios";
import Vue from "vue";

// 导入 Nprogress 对应的JS和CSS
import NProgress from "nprogress";
// 改用 CDN方式
// import "nprogress/nprogress.css"

axios.defaults.baseURL = `http://120.53.120.229:8888/api/private/v1/`;
// axios.defaults.baseURL = `https://www.liulongbin.top:8888/api/private/v1/`

// 添加 请求头 和 进度条 NProgress.start()
axios.interceptors.request.use((config) => {
  // 添加 进度条
  NProgress.start();

  // 添加请求头
  config.headers.Authorization = window.sessionStorage.getItem("token");

  return config;
});

axios.interceptors.response.use((config) => {
  // 隐藏 进度条
  NProgress.done();
  return config;
});

Vue.prototype.$http = axios;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 4.2 二次封装

比如我们可以把 首页所有的请求相关的 API 封装到一个 JS文件
到时候只需要传入响应的参数即可。
home.js

import { request } from "./request";
// 二次封装

export function getHomeMutidata() {
  return request({
    url: "/home/multidata",
  });
}

export function getHomeGoods(type, page) {
  return request({
    url: "/home/data",
    params: {
      type,
      page,
    },
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar