网络模块封装

🎉 选择什么样的网络模块？

选择一：传统的 Ajax

传统的 Ajax 是基于 XMLHttpRequest(XHR)。

,配置和调用方式等非常混乱。

编码起来看起来就非常蛋疼。

所以真实开发中很少直接使用, 而是使用 jQuery-Ajax。

选择二：jQuery-Ajax

首先, 我们先明确一点: 在 Vue 的整个开发中都是不需要使用 jQuery 了。

那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个 jQuery, 你觉得合理吗?

jQuery 的代码 1w+行.Vue 的代码才 1w+行。

完全没有必要为了用网络请求就引用这个重量级的框架。

选择三：Vue-resource

Vue-resource 的体积相对于 jQuery 小很多.

另外 Vue-resource 是官方推出的.

在 Vue2.0 退出后, Vue 作者就在 GitHub 的 Issues 中说明了去掉 vue-resource, 并且以后也不会再更新.那么意味着以后 vue-reource 不再支持新的版本时, 也不会再继续更新和维护.

对以后的项目开发和维护都存在很大的隐患.

选择四：axios

axios 有非常多的优点, 并且用起来也非常方便.

稍后, 我们对他详细学习.

功能特点:

在浏览器中发送 XMLHttpRequests 请求

在 node.js 中发送 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

等等

🎉axios 请求方式？

axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

🎉 基本请求方式？

没有请求参数：

1
2
3
4
5
6
7
8

axios
  .get("http://123.207.32.32:8000/home/data")
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log("error");
  });

有请求参数：

1
2
3
4
5
6
7
8
9
10
11
12
13

axios
  .get("http://123.207.32.32:8000/home/data", {
    params: {
      type: "sell",
      page: 1,
    },
  })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log("error");
  });

补充：请求的基本类型

1 GET 请求指定的页面信息，并返回实体主体。

2 HEAD 类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头

3 POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。

4 PUT 从客户端向服务器传送的数据取代指定的文档的内容。

5 DELETE 请求服务器删除指定的页面。

6 CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。

7 OPTIONS 允许客户端查看服务器的性能。

8 TRACE 回显服务器收到的请求，主要用于测试或诊断。

读完这一篇 IT 程序员终于明白 post 和 get 的区别
https://zhuanlan.zhihu.com/p/92549929

🎉 并发请求方式？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

axios
  .all([axios(), axios()])
  .then(
    axios.spread((res1, res2) => {
      console.log(res1);
      console.log(res2);
    })
    //results => {
    //console.log(results[0]);
    // console.log(results[1])
    // }
  )
  .catch((err) => {
    console.log("error");
  });

🎉 全局配置？

在上面的示例中, 我们的 BaseURL 是固定的

事实上, 在开发中可能很多参数都是固定的.

这个时候我们可以进行一些抽取, 也可以利用 axiox 的全局配置

1
2

axios.defaults.baseURL = ‘123.207.32.32:8000’;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

🎉 常见的配置选项？

请求地址

url: ‘/user’,

请求类型

method: ‘get’,

请根路径

baseURL: ‘http://www.mt.com/api‘,

请求前的数据处理

transformRequest:[function(data){}],

请求后的数据处理

transformResponse: [function(data){}],

自定义的请求头

headers:{‘x-Requested-With’:’XMLHttpRequest’},

URL 查询对象

params:{ id: 12 },

查询对象序列化函数

paramsSerializer: function(params){ }

request body

data: { key: ‘aa’},

超时设置 s

timeout: 1000,

跨域是否带 Token

withCredentials: false,

自定义请求处理

adapter: function(resolve, reject, config){},

身份验证信息

auth: { uname: ‘’, pwd: ‘12’},

响应的数据格式 json / blob /document /arraybuffer / text / stream

responseType: ‘json’,

🎉 创建 axios 实例？

为什么要创建 axios 的实例呢?

当我们从 axios 模块中导入对象时, 使用的实例是默认的实例.

当给该实例设置一些默认配置时, 这些配置就被固定下来了.

但是后续开发中, 某些配置可能会不太一样.

比如某些请求需要使用特定的 baseURL 或者 timeout 或者 content-Type 等.

这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

1
2
3
4
5
6
7
8
9

const axiosMain = axios.create({
    baseURL:"http://123.207.32.32:8000/home/data",
    timeout:5000,
    headers:{
       'Content-Type':'application/x-www-form-urlencoded'
    }
})
axiosMain({...})
axiosMain({...})

🎉axios 封装？

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
30
31
32
33
34
35
36
37
38

import OrignAxios from "axios";
export function request(config) {
  const instance = OrignAxios.create({
    //基础配置
    baseURL: "http://123.207.32.32:8000/home/data",
    timeout: 5000,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  });
  //拦截器配置
  //拦截器作用
  //1.添加loading动画
  //2.修改不符合规范的数据,判断是否有token
  //3.数据的序列化
  instance.interceptors.request.use(
    (config) => {
      console.log(config);
      return config;
    },
    (error) => {
      console.log(error);
      return error;
    }
  );
  instance.interceptors.response.use(
    (response) => {
      console.log(response);
      return response.data;
    },
    (error) => {
      console.log(error);
      return error;
    }
  );
  //返回数据
  return instance(config);
}

axios 调用：

1
2
3
4
5
6
7
8
9
10

import { request } from "network/request";
request({
  url: "",
})
  .then(() => {
    console.log(res);
  })
  .catch(() => {
    console.log("error");
  });