1.选择什么网络模块？

• 传统的ajax
  • 配置和调用方式等非常混乱. 编码起来看起来就非常蛋疼. 所以真实开发中很少直接使用, 而是使用jQuery-Ajax
• jquery的ajax
  • 相对于传统的Ajax非常好用. 为什么不选择它呢? 首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了. 那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 不合理
• Vue-resource
  • Vue2.0之后不在维护
• axios（推荐）

2.axios的功能特点

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

3.axios的基本使用

• 安装：npm install axios@0.18.0 --save

• main.js

  import Vue from 'vue'
  import App from './App'
  import axios from 'axios'
  
  Vue.config.productionTip = false
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    render: h => h(App)
  })
  
  //1.axios基本使用
  axios({
     url:'http://123.207.32.32:8000/home/multidata',
     method:'get'
   }).then(res=>{
     console.log(res);
  })
  
  // //==== axios.get()
  

• 注：url为接口地址，res为返回的数据

4.axios的参数传递（get）

//参数传递1
axios({
  url:'http://123.207.32.32:8000/home/data?type=sell&page=3',
  method:'get'
}).then(res=>{
  console.log(res);
})

//参数传递2
axios({
  url:'http://123.207.32.32:8000/home/data',
  method:'get',
  params:{
    type:'pop',
    page:3
  }
}).then(res=>{
  console.log(res);
})

• 参数可以直接拼接或者写入params中

5.axios发送并发请求

axios.all([axios({
  baseURL:'http://123.207.32.32:8000',
  timeout:5,
  url:'/home/multidata',
}),axios({
  baseURL:'http://123.207.32.32:8000',
  timeout:5,
  url:'/home/data',
  params:{
    type:'sell',
    page:3
  }
})
]).then((results)=>{
  console.log(results);
})

• 注：利用all函数，可以传入多个axios对象，最后返回的结果都存储在results中，可以用index取出

6.axios的全局配置

//3.axios配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
  url:'/home/multidata',
}),axios({
  url:'/home/data',
  params:{
    type:'sell',
    page:3
  }
})
]).then((results)=>{
  console.log(results);
})

• 抽取一些共用的配置，如：baseURL、timeout

7.创建对应的axios的实例

• 目的：一般对于大公司来说，网络请求接口 可能采用了分布式或者集群，所以不同模块部分的可能部署在不同的服务器，ip+端口各不相同！

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:1
  }
}).then(res=>{
  console.log(res);
})

const instance2 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout:1000
})

• 这样的话，不同的实例，可以分别设置不同的配置

8.模块封装

• 问题：对于不同的组件，可能会分别发生请求，但是我们不能在每个组件分别引入axios，这样耦合程度太大，并且但axios突然有一天被禁用了，那么你需要修改多个文件

• 所以，我们一般单独创建一个文件夹network，然后创建文件request.js作为模块，然后在其他组件嗲用使用，如果有一天axios框架被替代了，我们只需要修改request.js文件即可。

  

• request.js模块

import axios from 'axios'

export function request(config){
    //1.创建axios的实例
    const instance = axios.create({
        baseUrl:'http://23.207.32.32:8000',
        timeout:5000
    })
    //2.发送真正的网络请求
    // instance本身就是一个promise对象
    return instance(config)
}

• main.js引入

//5.封装模块
import {request} from './network/request';

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

9.拦截器

import axios from 'axios'

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

    //2.配置请求和响应拦截
    //2.1
    instance.interceptors.request.use(config =>{
        //1.比如config中的一些信息不符合服务器的要求
        //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
        //3.某些网络请求（比如登录token），必须携带一些特殊的信息
        return config;
    },err =>{
        console.log('request拦截错误');
        return err;
    })
    //2.2
    instance.interceptors.response.use(res =>{
        //1.主要对数据的过滤
        return res.data;
    },err =>{
        console.log('responce');
        return err;
    })

    //3.发送真正的网络请求
    return instance(config)
}

• 请求拦截器
• 作用：
  • 1.比如config中的一些信息不符合服务器的要求
  • 2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
  • 3.某些网络请求（比如登录token），必须携带一些特殊的信息
• 响应拦截器
• 作用：
  • 1.主要对数据的过滤