利用axios进行网络请求

axios是一个基于Promise的网络请求库。同时也是Vue官方推荐使用的网络请求库。本文主要根据作者自身在学习过程的一些见解总结如何利用axios进行网络请求。

1. 安装

请先确认电脑上安装有较高版本的Node.js。然后进入项目中，在命令行中输入

npm i axios

即可安装成功，默认安装最新版本的axios，如有特殊需求请注明安装的版本号。

2. 利用axios构建一个简单的网络请求

• 引入axios

import axios from "axios"

• 构建请求

axios("请求的URL")
.then(res => console.log(res))

经过上述两步我们已经构建了一个基本的get请求，axios请求的结果无论成功与否都会返回一个promise对象，因此调用then方法即可查看请求的结果了。
某些时候我们可能需要发送的不是get请求，这时候就需要对axios的配置参数进行更加详细的设置。

axios({
  method:"get/post", //用于配置请求的方法
  url: "请求的地址",
  data: {} //配置请求需要发送的数据（比如使用post请求的时候）
})

3. 请求别名的使用

一种简化请求方法配置的API，如果需要发送post请求

axios.post('/user', {
  firstName: 'Tom',
  lastName: 'Jerry'
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

发送get请求也是如此，将除URL外的其他配置项放到另一个参数中即可。

4. 全局配置

在一个项目当中，我们经常存在需要多次请求同一个基本URL下的不同路由，如果每次发送请求都书写一遍基本URL无疑会产生大量的代码重复，因此可以使用全局配置来简化代码。

axios.defaults.baseURL = '' //全局基本URL
axios.defaults.timeout = 5000 //全局默认请求限时

5. 利用axios实例进行网络请求

在实际的项目中，我们不可能全程只发送一次网络请求，如果我们每进行一次网络请求就单独书写一个axios配置，将来如果axios不再进行维护或者项目需要更换其他的网络请求库的时候，需要重构的代码量无疑是巨大的。因此我们试想可不可以将网络请求单独抽离并封装为函数，进行网络请求的时候只需要调用对应的函数并且传入参数即可。这样将来即使需要更换请求库，也只需要对封装的函数进行修改而不是大量重构代码，可以大大减少工作量。
基于这样的需求，更推荐在项目中使用axios实例的方式进行网络请求。

export function request(config) {
    //1.创建axios实例
    const instance = axios.create({
        baseURL: 'http://152.136.185.210:7878/api/hy66',
        timeout: 5000
    })

    //2.axios拦截器的使用
    //请求拦截器
    /*需要拦截请求的原因
    *   1.config中包含了某些不符合服务器要求的信息
    *   2.发送网络请求的时候需要向用户展示一些加载中的图标
    *   3.网站需要登录才能请求资源，也就是需要token才能请求资源*/
    instance.interceptors.request.use(config => {
        console.log(config)
        return config//拦截器里一定要记得将拦截的结果处理后返回，否则无法进行数据获取
    }, err => {
        console.log(err)
    })
    //响应拦截器
    instance.interceptors.response.use(res => {
        console.log(res)
        return res.data
    }, err => {
        console.log(err)
    })

    //3.发送网络请求
    //axios实例本身返回的就是Promise对象，直接调用即可
    return instance(config)
}

上述代码就是一个简单的request网络请求函数封装，这样每次调用其进行网络请求的时候创建的都是一个单独的axios实例，可以进行更加灵活的配置。
同时还有一个值得注意的地方就是拦截器，拦截器会对请求和响应的结果进行一定的处理，不过配置拦截器后一定要记得将拦截的结果在最后放行。