Vuejs第七篇（网络封装axios）

目录（点击下面链接跳转到对应知识点）

• 一、网络请求模块的选择-axios（了解）
• 二、axios框架的基本使用（掌握）
• 三、axios发送并发请求（掌握）
• 四、axios的配置信息相关（掌握）
• 五、axios的实例和模块封装（掌握）
• 六、axios的拦截器的使用（掌握）

一、网络请求模块的选择-axios（了解）

返回目录

以下知识点有兴趣的可以自己去了解了解

常见的网络请求模块，以及优缺点对比

JSONP的原理和封装

• JSONP原理回顾
• JSON请求封装

axios的内容详解

• 认识axios网络模块
• 发送基本请求
• axios创建实例
• axios拦截器的使用

选择什么网络模块？

介绍一下JSONP：

为什么选择axios：

• 作者推荐和功能特点
• 功能特点：
  • 在浏览器中发送XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 等等

老师理解axios名称的由来：ajax io system

二、axios框架的基本使用（掌握）

返回目录

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

开始我们的使用学习吧！
安装axios：

npm install axios --save

安装后随意位置我们都可以使用：
我们在main.js中使用：

运行，数据请求结果：

刷新一下请求数据：

method可以定义请求的方式

我们也可以带参请求，方式一：（不推荐）

参数书写方式二（推荐）

请求结果：

三、axios发送并发请求（掌握）

返回目录

有时候，我们可能需求同时发送两个请求

• 使用axios.all，可以放入多个请求的数组
  
  
  返回的是一个数组，我们怎么使用呢？

• axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2

• 当然也可以利用索引拿到
  
  
  拓展知识：
  对象的解构，
  数组的解构：
  

四、axios的配置信息相关（掌握）

返回目录

在之前的示例中，我们的BaseURL是固定的

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

axios.defaults.baseURL = 'http://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}

注意点：当请求类型为get请求的时候，使用params:{}，当请求类型为post的时候用data:{}

五、axios的实例和模块封装（掌握）

返回目录

为什么要创建axios实例：

• 当我们从axios模块中导入对象时，使用的实例是默认实例
• 当给该实例设置一些默认配置时，这些配置就被固定下来了
• 但是后续开发中，某些配置可能会不太一样
• 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
• 这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息

代码体验1：

// 4.创建对应的axios的实例
const instance1=axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
})

instance1({
  url:'/home/multidata',
}).then(res=>{
  console.log(res)
})

instance1({
  url:'/home/data',
  params:{
    type: 'sell',
    page: 5
  }
}).then(rest=>{
  console.log(rest)
})

运行：

刷新：

代码体验2：服务器访问地址不同的全局配置

const instance2=axios.create({
  baseURL:'http://222.111.33.33:8000',
  timeout:10000,
  headers:{}
})

当我们进行开发的时候，并不是每个组件都会写上网络请求的，我们最好把所有的网络请求都放到一个文件，再利用框架进一步封装
第一步：在src包下建立network包，并在此包下建立request.js文件：

第二步：代码示例（模块化封装与数据回调获取一）

import axios from "axios";

export function request(config,success,failure) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
  })

  // 2.发送真正的网络请求
  instance(config).then(res=>{
      success(res)
  }).catch(err=>{
      failure(err)
  })
}

获取数据：（这里是在main.js中获取）

// 5.拿到我们的网络请求数据
import {request} from "./network/request";

request({
  url:'/home/multidata'
},res=>{
  console.log(res)
},err=>{
  console.log(err)
})

运行测试：

刷新：

第二步：代码示例（模块化封装与数据回调获取终极方案）


运行测试：

刷新：

终极方案简化版：

import axios from "axios";
export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:5000
    })
    // 2.发送真正的网络请求
    return instance(config)//本身返回的就是一个Promise
}

request({
  url:'/home/multidata'
}).then(res =>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

运行测试：

刷新：

六、axios的拦截器的使用（掌握）

返回目录

axios拦截器的作用在于对于发送的请求或响应进行拦截，增加，删除，处理一些数据之后再判断是否放行。

• axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理
• 如何使用拦截器呢?

四种类型：请求成功，请求失败，响应成功，响应失败

import axios from "axios";
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios的拦截器（拦截全局:）
  instance.interceptors.request.use(config => {//请求成功执行
    console.log(config)//拦截全局信息
    //请求拦截信息做什么事:(1)比如config中一些信息不符合服务器的要求
    //(2)比如每次发送网络请求时，都希望在界面中显示一个请求的图标
    //(3)某些网络请求(比如登入(token)),必须携带一些特殊的信息
    return config //放行全局请求信息（否则其他组件无法获取响应信息）
  }, error => {//请求失败执行
    console.log(error)
  })
  //响应拦截:
  instance.interceptors.response.use(result => {
    console.log(result)
    // result.data取出data数据
    return result.data//返回拦截的响应数据
  },error => {
    console.log(error)
  })
  // 3.发送真正的网络请求
  return instance(config)//本身返回的就是一个Promise
}

request({
  url:'/home/multidata'
}).then(res =>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

细节运行测试就自主测试了，这里是统一返回结果：