前端小白入门Vue只axios库的学习

---

前言

首先，为什么要学习我们的axios网络请求库：在之前我们常用的就是Jquery的ajax库，但我们已经使用vue了，就可以使用vue推荐的axios库，不用为了一个ajax库而引入jQuery。

一、axios库特点？

1.在浏览器中发生XMLHttpRequests请求
2.在node.js中发射http请求
3.支持PromiseAPI
4.拦截请求和响应
5.转换请求和响应数据

二、使用步骤

安装axios库

npm install axios --save

在使用的地方导入该库

import axios from 'axios'

简单使用：
因为我们的axios支持Promise，axios会自动调用我们Promise中的resolve(返回数据)，就会自动执行.then()中的函数

    axios({
      // 请求地址
      url:'http://xxxxxx',
      method:'get/post'
    }).then(res => {
      // 返回数据
      console.log(res)
    })

请求需要参数
params中的会自动使用？进行拼接数据

    axios({
      // 请求地址
      url: 'http://xxxxxx',
      // 默认为get
      method: 'get/post',
      params: {
        type: 'pop',
        page: 1
      }
    }).then(res => {
      // 返回数据
      console.log(res)
    })

同时进行两个网络请求处理

    axios.all([
      axios({
        url: 'http://xxxxxx1',
      }),
      axios({
        url: 'http://xxxxxx1',
      }),
    ]).then(results => {
      console.log(results)
    })

如果想对结果进行展开

    axios.all([
      axios({
        url: 'http://xxxxxx1',
      }),
      axios({
        url: 'http://xxxxxx1',
      })
    ]).then(axios.spread((res1, res2) => {
      console.log(res1)
    }))

局部配置：

    axios({
      // 请求url前会自动拼接
      baseURL: 'http://xxxx',
      // 请求的响应时间
      tiemout: 5000,
      // 请求地址
      url: '/yyyyy',
      // 默认为get
      method: 'get/post',
      params: {
        type: 'pop',
        page: 1
      }
    }).then(res => {
      // 返回数据
      console.log(res)
    })

全局配置：

    // 全局配置公共URL
    axios.defaults.baseURL = 'http://123.2131'
    // 全局配置超时时间
    axios.defaults.timeout = 5000
    axios({
      // 请求地址
      url: '/yyyyy',
      // 默认为get
      method: 'get/post',
      params: {
        type: 'pop',
        page: 1
      }
    }).then(res => {
      // 返回数据
      console.log(res)
    })

现在出现一个情况，比如我们的主页和分类的公共url不同
我们就需要采用创建axios实例来进行请求

    // 创建对应主页的实例
    const instance1 = axios.create({
      baseURL:'http://xxx',
      timeout: 5000
    })
    instance1({
      url:'/yyy'
    }).then(res => {
      console.log(res)
    })
     // 创建对应分类的实例
    const instance2 = axios.create({
      baseURL:'http://zzz',
      timeout: 5000
    })
    instance2({
      url:'/zzz'
    }).then(res => {
      console.log(res)
    })

现在我们项目使用axios库进行对应的调用，但如果现在出现了极端情况，axios突然没有人进行维护了，那么我们应该怎么办呢？
所以现在我们要对axios进行封装，以免出现这样的情况：
request.js

import axios from 'axios'
export function request(config){
  // 1.创建axios实例
  const instance = axios.create({
    baseURL: 'http://xxxx',
    timeout:5000
    })
    // 发送真正的网络请求
    instance(config)
    .then(res => {
		console.log(res)
	})
  }

现在又出现了一个新的问题，我们如何将这个函数给调用者传出去让他进行处理：

    import axios from 'axios'
    export function request(config, success, failure) {
      // 1.创建axios实例
      const instance = axios.create({
        baseURL: 'http://xxxx',
        timeout: 5000
      })
      // 发送真正的网络请求
      instance(config)
        .then(res => {
          success(res)
        }).catch(err => {
          failure(err)
        })
    }

我们的调用者进行使用时：
使用了回调函数的方式

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

第二种写法

    import axios from 'axios'
    export function request(config) {
      // 1.创建axios实例
      const instance = axios.create({
        baseURL: 'http://xxxx',
        timeout: 5000
      })
      // 发送真正的网络请求
      instance(config.baseConfig)
        .then(res => {
          config.success(res)
        }).catch(err => {
          config.failure(err)
        })
    }
    request({
      baseConfig: {
      },
      success: function (res) {
        console.log(res)
      },
      failure: function (res) {
        console.log(res)
      }
    })

第三种：

    import axios from 'axios'
    export function request(config) {
      return new Promise((resolve, reject) => {
        // 1.创建axios实例
        const instance = axios.create({
          baseURL: 'http://xxxx',
          timeout: 5000
        })
        // 发送真正的网络请求
        instance(config)
          .then(res => {
            resolve(res)
          }).catch(err => {
            reject(err)
          })
      })
    }
    request({
      url:'/home/xxx'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

第四种（推荐）：

    import axios from 'axios'
    export function request(config) {
        // 1.创建axios实例
        const instance = axios.create({
          baseURL: 'http://xxxx',
          timeout: 5000
        })
        // 发送真正的网络请求
        return instance(config)
    }
    request({
      url:'/home/xxx'
    }).then(res => {
      console.log(res)
    }).catch(err => {
      console.log(err)
    })

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

      // 请求拦截
      instance.interceptors.request.use(config => {
        console.log(aaa)
        // 拦截成功后放行
        return config
        // 为什么要拦截
        //1.config中的一些信息不符合服务器的要求
        //2.每次发送网络请求时，显示请求的图标
        // 3.某些网络请求需要（比如登录token），必须携带一些特殊信息
      }, err => {
        console.log(err)
      });
      // 响应拦截
      instance.interceptors.response.use(res => {
        console.log(res)
        // 拦截后必须返回
        return res
      },err => {
        console.log(err)
      });

总结

本次对于axios库的学习，需要搭配理解Promise进行一起使用。