本文共 5704 字，大约阅读时间需要 19 分钟。

• 上一篇：《Vue - 9 - Vuex》-

• Github - axios：

• Github - 测试代码（包括前后端）：

# 为什么网络封装

如果直接使用第三方网络框架，当需要更换框架或者重构时，异常恶心

因此，需要进行一步封装

# 选择什么网络模块

## 选择一: 传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?

非常好解释, 配置和调用方式等非常混乱. 编码起来看起来就非常蛋疼. 所以真实开发中很少直接使用, 而是使用jQuery-Ajax

## 选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax

相对于传统的 Ajax 非常好用.

为什么不选择它呢?

• 首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用 jQuery 了.
• 那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
  jQuery的代码1w+行.
  Vue的代码才1w+行.
  完全没有必要为了用网络请求就引用这个重量级的框架.

## 选择三: 官方在Vue1.x的时候, 推出了Vue-resource .

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

另外Vue-resource是官方推出的. 为什么不选择它呢?

• 在 Vue2.0 退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.

那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.

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

## 选择四: axios

在说明不再继续更新和维护vue-resource的同时,

作者还推荐了一个框架: axios 为什么不用它呢? axios有非常多的优点, 并且用起来也非常方便.

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

# 同源策略 sop

跨域访问问题：

根据 同源策略(SOP same origin policy) 我们的项目部署在 domain1.com 服务器上时, 是不能直接访问 domain2.com 服务器上的资料的.

解决方案：

这个时候, 我们利用 <script> 标签的 src 帮助我们去服务器请求到数据, 将数据当做一个 javascript 的函数来执行, 并且执行的过程中传入我们需要的 json .

# jsonp

首先，要了解 jsonp （JSON with padding） - “填充式的JSON”

这篇文章讲 jsonp 透彻：

在前端开发中, 我们一种常见的网络请求方式就是 JSONP

使用 JSONP 最主要的原因往往是为了 解决跨域访问的问题.

## JSONP 的原理是什么呢?

JSONP的核心在于通过 <script> 标签的 src 来帮助我们请求数据.

所以, 封装 jsonp 的核心就在于我们监听 window 上的 jsonp 进行回调时的名称.

## JSONP如何封装呢?

我们一起自己来封装一个处理JSONP的代码吧.

# axios 静态

Github -

功能特点：

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 等等

个人理解：

axios == ajax i/o system

## axiox请求方式

支持多种请求方式:

• 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]])

如何发送请求呢?

我们看一下下边的案例

## 发送get请求演示

安装

npm i axios --save

// axios 跨域import axios from 'axios'// /home/multidata// /home/data?type=sell&page=3axios({
     url: 'http://localhost:8001/home/multidata',  method: 'get'}).then(value => {
     console.log('http://localhost:8001/home/multidata', value)})// String[] types = { "phone", "book", "computer", "clothing", "daily-supply", "adult", "CD", "virtual" };axios.get('http://localhost:8001/order/data', {
     // 专门针对get请求的参数拼接  params: {
       type: 'book',    page: 2  }}).then(value => {
     console.log('http://localhost:8001/order/data', value)})

## axios 并发请求：axios.all([axios()…])

axios  .all([    axios({
         url: 'http://localhost:8001/home/multidata',      method: 'get'    }),    axios.get('http://localhost:8001/order/data', {
         // 专门针对get请求的参数拼接      params: {
           type: 'book',        page: 3      }    })  ])  .then(value => {
       console.log('value', value)    return Promise.resolve(value)  })  .then(    axios.spread((res1, res2) => {
         console.log('res1', res1)      console.log('res2', res2)    })  )

## 全局配置

Github -

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

事实上, 在开发中可能很多参数都是固定的. 这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

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

## 常见配置

# 分布式概念

生产环境，一般使用 nginx 反向代理，形成 分布式 的后台服务。

减轻服务器压力，增加灵活性

# axios 实例

上面说，通过反向代理访问分布式服务，我们不需要在多个域中跨域访问。

（但是，下面我们假定没有 反向代理，我们需要在多个环境下获取服务）

这样的话，只有全局的静态的 axios 显然是不行的。

我们需要 axios 实例，为我们准备环境。

// 创建对应的 axios 的实例1const instance1 = axios.create({
   	baseURL: 'http://222.111.33.33:8000' , 	timeout: 5000})// 使用实例1instance1({
   	rul: '/home/multidata' }).then(res => {
   	console.log()res;})// 使用实例2instance1({
   	rul: '/home/multidata' }).then(res => {
   	console.log()res;})// 创建对应的 axios 的实例1const instance2 = axios.create({
   	baseURL: 'http://222.111.33.33:8001' , 	timeout: 1000})// 使用实例1instance1({
   	rul: '/home/multidata' }).then(res => {
   	console.log()res;})// 使用实例2instance1({
   	rul: '/home/multidata' }).then(res => {
   	console.log()res;})

# 封装 request 模块

创建目录 @/network 专门存放网络模块

创建 @/network/request.js 写网络请求代码

import axios from 'axios'// 封装 request 模块export function request (config) {
     // 1. 创建 axios 的实例  const instance = axios.create({
       baseURL: 'http://localhost:8001',    timeout: 5000  })  // 发送真正的网络请求  return instance(config)}

然后用自己封装好的组件调用

代码下载：

# 拦截器

axios 提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

如何使用拦截器呢？

中文 api 文档 -

## 请求拦截

在前面的代码中添加 成功拦截

import axios from 'axios'// 封装 request 模块export function request (config) {
     // 1. 创建 axios 的实例  const instance = axios.create({
       baseURL: 'http://localhost:8001',    timeout: 5000  })  // axios 的拦截器  instance.interceptors.request.use(    config=> {
         console.log('interceptor success', config)      // return config    },    err => {
         console.log('interceptor err', err)    }  )  // 发送真正的网络请求  return instance(config)}

拦截成功请求！

但是有报错，

TypeError: Cannot read property 'cancelToken' of undefined    at throwIfCancellationRequested (dispatchRequest.js?c4bb:12)    at dispatchRequest (dispatchRequest.js?c4bb:24)

原因：我们拦截的 value 配置信息 config

我们需要把请求的配置向下传递，才能正确发送请求

## 使用情况

由上面请求可见，拦截器是真正可以进行请求拦截的

• 校验：我们可以对 config 中一些不符合服务器的要求给进行拦截

• 增强：其次，我们可以通过拦截器，在发送请求前做一些操作

  如：
  在请求前，给界面添加 进度条
  然后在收到响应，进行处理前，去掉进度条
  等

• 携带信息：

  比如：给请求携带 token 信息

## 响应拦截

响应拦截 同理

import axios from 'axios'// 封装 request 模块export function request (config) {
     // 1. 创建 axios 的实例  const instance = axios.create({
       baseURL: 'http://localhost:8001',    timeout: 5000  })  // axios 的拦截器  instance.interceptors.request.use(    config => {
    // config 是 请求的配置信息      console.log('request interceptor success', config)      return config    },    err => {
         console.log('request interceptor err', err)    }  )  instance.interceptors.response.use(response => {
       console.log('response interceptor success', response)    return response  }, err => {
       console.log('response interceptor err', err)  })  // 发送真正的网络请求  return instance(config)}

转载地址：https://lawsssscat.blog.csdn.net/article/details/104729802 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！