一文带你看懂axios

本系列为各个前端相关知识重新深度学习，有需要的小伙伴可关注该专栏，后续会持续更新不同类型的前端相关知识总结

前言

axios作为ajax的封装版，基于promise api，适用于浏览器和node.js。它可以使用同一套代码运行在浏览器和 nodejs 中。在服务器端它使用原生的node.js http 模块，在客户端（浏览器）它使用 XMLHttpRequests。本文将介绍axios的特性、实际使用，以及在项目中如何对axios进行封装。欢迎小伙伴们点赞收藏。

Axios API

安装

通过npm或yarn安装axios

npm install axios

简单示例

通过两个简单的示例，我们来看看axios是如何实现get请求和post请求的。

（1）实现get请求

javascript 复制代码

const axios = require('axios');
// get请求从接口获取数据
axios.get('/getUserInfo?id=12345')
  .then(function (response) {
    //成功响应数据
    console.log(response);
  })
  .catch(function (error) {
    //发生错误，捕捉到错误信息
    console.log(error);
  })
  .finally(function () {
    //总会被执行的代码段
  });

配合async、await

vbnet 复制代码

async function getUserInfo() {
  try {
    const response = await axios.get('/getUserInfo?id=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

（2）实现post请求

php 复制代码

const {data} = await axios.post('https://test.com/post', {
    firstName: 'li',
    lastName: 'fc',
    orders: 1
  }, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
})

请求方法的别名

axios提供了一系列的请求别名，具体如下：

scss 复制代码

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])

创建实例

可以通过创建一个实例来自定义配置axios。如下所示：

arduino 复制代码

const axiosConfig = {
    baseURL: '/',
    timeout: 60000,
    responseType: 'json',
    withCredentials: true, // 是否允许带cookie这些
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'X-Requested-With': 'XMLHttpRequest'
    }
};

const Axios = axios.create(axiosConfig);

这用当我们使用Axios这个实例对象时就可以使用上面通用的axiosConfig里的配置，不再需要每个请求单独配置。具体的可以配置的属性请往下看。

可配置对象

在axios配置中提供了大量的配置，其中只有url是必须的，如果其他配置都不写默认为get请求。下面将详细介绍各个配置：

php 复制代码

{
  //请求的服务器路径
  url: '/user',

  // 请求的方法类型。get、put、post...
  method: 'get', // default

  //将会添加到url前面
  baseURL: 'https://test.com/api',

  //发送请求之前，对请求的数据进行修改
  transformRequest: [function (data, headers) {
    //返回修改后的数据
    return data;
  }],

  //处理响应的数据
  transformResponse: [function (data) {
    //返回修改后的数据
    return data;
  }],

  // 自定义请求头字段
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //请求的参数
  params: {
    id: 12345
  },

  //对请求参数进行序列化
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  //发送请求的实体数据，用于'PUT', 'POST', 'DELETE', and 'PATCH'
  data: {
    firstName: 'Fred'
  },
  
  //设置响应超时时间，超过时间将取消请求
  timeout: 1000, // default is `0` (no timeout)

  //表示跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)
  withCredentials: false, // default

  // 允许自定义处理请求，可以配置mock数据
  adapter: function (config) {
    /* ... */
  },

  //响应的数据类型'arraybuffer', 'document', 'json', 'text', 'stream', 'blob'
  responseType: 'json', // default

  //响应数据的编码
  responseEncoding: 'utf8', // default

  // 处理上传进度
  onUploadProgress: function (progressEvent) {
    // 当上传时处理进度条等事件
  },

  // 处理下载时
  onDownloadProgress: function (progressEvent) {
    // 下载时处理进度条等事件
  },

  //允许最大的响应数据
  maxContentLength: 2000,

  // 最大的请求体长度
  maxBodyLength: 2000,

  // 配置有效的状态，如果返回不为true则不响应数据
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  //自动处理的重定向次数
  maxRedirects: 5, // default

  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  //自定义代理配置
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
  },
}

配置默认值

你可以指定将应用于每个请求的配置默认值。如下所示：

ini 复制代码

axios.defaults.baseURL = 'https://test.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

拦截器

通过拦截器可以在请求或响应被 then 或 catch 处理之前拦截它们，比如往请求头中增加token或处理响应体返回的数据，根据返回的状态码做出对应的处理。

javascript 复制代码

//增加请求拦截器
axios.interceptors.request.use(function (config) {
    //请求之前修改配置
    return config;
  }, function (error) {
    return Promise.reject(error);
  });

//增加响应拦截器
axios.interceptors.response.use(function (response) {
    //对响应数据惊喜处理
    return response;
  }, function (error) {
    return Promise.reject(error);
  });

取消请求

axios调用中设置 timeout 属性可在长时间未响应时取消响应。如果要主动取消请求，可使用AbortController，使用方法如下：

javascript 复制代码

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// cancel the request
controller.abort()

CancelToken也可用于取消请求，不过已被弃用。

封装Axios

（1）我们新建axiosConfig.js，写入以下配置，分别为发送和请求时成功和失败的回调函数，用来拦截处理。

javascript 复制代码

'use strict';
import router from '@/router';
import { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
import { Session } from '../utils/storage.js';
export const axiosConfig: AxiosRequestConfig = {
    baseURL: '/',
    timeout: 60000,
    responseType: 'json',
    withCredentials: true, // 是否允许带cookie这些
};

/**
 * 请求成功发送之前的回调
 * @param config
 * @returns {*}
 */
function onRequestSucceed(config: any) {
    if (Session.get('token')) {
        config.headers.token = Session.get('token');
    }
    return config;
}

/**
 * 请求发送失败了的回调
 * @param error
 * @returns {Promise<never>}
 */
function onRequestFailed(error: AxiosError) {
    return Promise.reject(error);
}

/**
 * 成功接到返回之后的回调
 * @param response
 */
function onResponseSucceed(response: AxiosResponse) {
    //未登录
    if (
        response?.data.code == 201 ||
        response?.data.code == 403 ||
        response?.data.code == 401
    ) {
        router.push({
            path: '/login',
            state: { status: false, msg: response?.data.msg },
        });
    }
    if (response.config.responseType == 'blob') {
        //导出
        return response;
    } else {
        return response.data;
    }
}

/**
 * 服务器未能响应返回体的回调
 * @param error
 */
function onResponseFailed(error: AxiosError) {
    if (error.response?.status == 401) {
        router.push('/login');
    }
    return Promise.reject(error);
}

export {
    onRequestSucceed,
    onRequestFailed,
    onResponseSucceed,
    onResponseFailed,
};

（2）创建interceptors.js文件，配置拦截器

typescript 复制代码

import axios from 'axios';
import {
    axiosConfig,
    onRequestFailed,
    onRequestSucceed,
    onResponseSucceed,
    onResponseFailed,
} from './axiosConfig';

const Axios = axios.create(axiosConfig);

/**
 * 拦截器配置
 */
Axios.interceptors.request.use(onRequestSucceed as any, onRequestFailed);
Axios.interceptors.response.use(onResponseSucceed, onResponseFailed);

export default Axios;

这样就能在接口请求时很方便地使用axios了

csharp 复制代码

getUserInfo(params: any) {
        return Axios.get('/getUserInfo', { params });
},

总结

以上便是axios的相关知识总结了，觉得有帮助的小伙伴帮忙点个赞哦。更多前端知识关注本人其他文章。