---

1.网络请求模块的选取

---

我们在开发中一定会碰到很多的网络请求，因为前后端交互数据，基本都是从后台请求过来的，那么我们如何去选择网络请求的方式呢？

• vue中发送网络请求有许多的方式，那么在开发中，我们如何选择呢？

  • 1.选择传统的Ajax(基于XMLHttpRequest(XHR))
    缺点:1.配置和调用的方式非常混乱
    2.手写xhr可能会人为出现错误。或者封装的不够全面。
    3.所以开发中我们很少直接使用AJAX，而是使用Jquery-Ajax

  • 2.那么我们为什么也不是用jq封装好的ajax？

    • 1.首先在vue开发中，不需要使用到jq
    • 2.如果我们进行一个请求，特意引用jq不合理
      (因为vue源码也就10000+，而jq源码也10000+)
    • 3.所以完全没有必要因为使用网络请求而使用jq框架。

  • 3.官方推出了Vue-resource (vue2.0后,但是这个已经不再维护了)
    +1.使用vue-resource会导致后面的项目难以维护。

  • 4.vue-axios(作者推荐使用的网络请求框架)

---

2.那么vue-axios有什么功能特点呢？

---

• 在浏览器中发送xhr请求
• 在node.js中也可以发送http请求
• 支持Promise api
• 拦截请求和响应
• 转换请求和响应数据
• 等等

---

3.安装和使用vue-axios

---

安装axios

npm install axios --save

使用axios

请求的基本使用

    使用post请求（后台接口为post）
    axios({
        url:'http://localhost:3002/index',
        method:'post'
      }).then(res => {
        console.log(res)
      })
    }




    使用get请求（后台接口为get时）
    axios({
        url:'http://localhost:3002/index',
        method:'get'
      }).then(res => {
        console.log(res)
      })
    }

axios 处理并发请求

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

  databtn(){
 axios.all([axios({
   url:'http://localhost:3002/index',
   method:'post'
 }),axios({
   url:'http://localhost:3002/api',
   method:'post'
 })])
.then(result => {
    console.log(result);
})

---

4.axios的配置相关信息

---

开发时的必用好东东（我上次没有整baseURL差点恶心死我）

+ 有时候我们开发的时候服务器前面的baseUrl时重复的，这时候我们想要修改url的话就会很麻烦，我们直接全局配置baseurl

+ 在main.js中配置全局的设置

    axios.defaults.baseUrl = 'http://localhost:8080'
    axios.defailts.timeout = 5

+ 这样当我们在前后端一起联调的时候，如果更换了局域网，我们在多个组件内不需要一个个更改，而是在main.js中修改baseURL就可以了。

---

5. axios模块封装

---

如果像上面这样使用axios的话，我们发现当我们使用的每一个组件里面都必须引用axios,这样我们有100个组件，就要引入100次axios，依赖性太强了

所以我们要封装一个文件
文件加 network  封装网络层

封装一个request.js文件

通过promise封装

//1.引入axios
import axios from 'axios'


//通过promise 封装

export function request(config){
    return new Promise((resolve, reject) => {
        //1.创建axios的实例
        const instance = axios.create({
            baseURL:'http://localhost:3002',
            timeout:5000
        })
        //2.发送真正的请求
        instance(config)
        .then(res => {
            resolve(res);
        })
        .catch(err => {
            reject(err);
        })
    })
}

完了在项目中引用

import {request} from '../network/request'
 request({
       url:'/index',
       method:'post'
     }).then(res => {
       console.log(res);
     }).catch(err => {
       console.log(err);
     })

这样就可以了。

---

6.axios拦截器

---

• 用于我们在每次发送请求或者得到响应后，进行相应的处理

• 如何使用拦截器呢？

instance.interceptors.request
传入两个函数
  instance.interceptors.request.use(config => {
            console.log(config);  //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
        },
        err=>{
            console.log(err);  //来到这里的情况比较少
        })

    打印config为
    ——————————————————————————————
      instance.interceptors.request.use(config => {
        console.log(config);  //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
    },
    err=>{
        console.log(err);  //来到这里的情况比较少
    })



    组件内使用request打印出来错误
    TypeError: Cannot read property 'cancelToken' of undefined
    at throwIfCancellationRequested (dispatchRequest.js?5270:12)
    at dispatchRequest (dispatchRequest.js?5270:24)

    因为第一步拿到了config 没有返回  所以就不能拿到数据而会报错了。
    如果把config  return 出去的话  这时候就可以拿到数据了。

   instance.interceptors.request.use(config => {
            console.log(config);  //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
            return config  //return 出去的话就可以拿到请求的数据了
        },
        err=>{
            console.log(err);  //来到这里的情况比较少
        })

我们使用请求拦截做什么呢？

• 假如说我们请求回来的config因为不符合服务器的要求，我们就需要把config设置进行修改，然后返回出去。
• 比如说我们在请求的时候显示出来一个图标，就是加载中的图标，请求成功后把这个图标隐藏了。
• 某些网络请求（比如登录）,必须携带一些特殊的信息（token）,拦截这个登录信息，跳转到别的地方。

---

7.拦截响应

---

 instance.interceptors.response
     instance.interceptors.response.use(result => {
            console.log("响应拦截打印:")
            console.log(result);
            //
        },
        err => {
            console.log(err);
        })

当响应拦截之后，axios就不能请求到数据了  打印出来是undefined
拦截完数据后，可以返回出我想要的数据，
比如说我只要拿到data数据，就可以return res.data

  instance.interceptors.response.use(result => {
            return result.data
        },
        err => {
            console.log(err);
        })

这样使用我们请求回来的数据就只有data,没有多余的信息了。

---

8.一个简单的axios封装

---

//1.引入axios
import axios from 'axios'


//通过promise 封装

export function request(config){
    return new Promise((resolve, reject) => {
        //1.创建axios的实例
        const instance = axios.create({
            baseURL:'http://localhost:3002',
            timeout:5000
        })

        //2.axios的拦截器
        //2.1请求拦截的作用
        instance.interceptors.request.use(config => {
            // console.log(config);  //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
            return config  //return 出去的话就可以拿到请求的数据了
        },
        err=>{
            // console.log(err);  //来到这里的情况比较少
        })

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

        //3.发送真正的请求
        instance(config)
        .then(res => {
            resolve(res);
        })
        .catch(err => {
            reject(err);
        })
    })
}