Axios 介绍及使用指南

本文将基于 Axios 原理，安装及封装方面展开描述，话不多说，现在发车！

一、原理

Axios 中文文档：起步 | Axios中文文档 | Axios中文网

赛前科普：

下文将涉及到三个关键词：Axios，Ajax，XMLHttpRequest

---

XMLHttpRequest（XHR） 

• 浏览器内置的一个 API，用于在客户端与服务器交换数据
• 可以实现异步请求
• 支持多种数据格式（如 JSON、文本等）

Ajax

• 通过异步请求，在不重新加载整个页面的情况下，动态更新页面的部分内容
• 支持多种数据格式（如 JSON、文本等）
• AJAX 通过 XMLHttpRequest 技术来实现

Axios 是一个基于 Promise 的 网络请求库，用于在浏览器和 Node.js 环境中发送 HTTP 请求

• 浏览器端中，较为传统的两种网络请求的 API 是 fetch 和 XMLHttpRequest，而 Axios 使用的是 XMLHttpRequest
• Node.js 环境中，Axios使用 Node.js 原生的 http 或 https 模块

Axios 使用 Promise 来处理异步请求，使得它可以通过 .then() 和 .catch() 来处理请求成功或失败的回调，而不需要使用传统的回调函数。

二、安装

执行如下命令：

npm install axios

  或者 

yarn add axios

安装完成后即可进行封装

三、封装

首先创建一个 request 目录，创建 request.js 文件用于封装方法，创建一个使用 axios 实例的 admin.js 文件。

request.js 文件

在这个文件中创建 axios 实例，设置 baseURL，timeout 等。

接下来就请求拦截器和相应拦截器，根据实际业务需求：

是否需要在请求拦截器中携带登录令牌，在响应拦截器中根据返回的状态码进行错误处理或者数据接收。

（状态码的处理可以单独封装一个方法，不必将判断大篇幅写在响应拦截器中，下面有代码示例）

import axios from 'axios'

// create an axios instance
const service = axios.create({
    // baseURL: process.env.VUE_APP_BASE_API,
    // withCredentials: true,
    timeout: 5000 // request timeout
})

// Add a request interceptor
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// Add a response interceptor
service.interceptors.response.use(
    response => {
        const res = response.data

        if (res.code !== 200) {
            console.error(res.message || 'Error')

            handleError(res.code) // TODO: Handle error

            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        return Promise.reject(error)
    }
)

export default service

handleError(code) => {
    // 利用 if，switch等对code进行条件判断进行对应处理
    switch (code) {
      case '500401':
        console.log('这是500401');
        break;
      case '500402':
        console.log('这是500402');
        break;
      case '500403':
        console.log('这是500403');
        break;
      default:
        console.log('default');
    }
}

 

import axios from 'axios'

const service = axios.create(config)
service.interceptors.request.use(requestHandler, requestErrorHandler)
service.interceptors.response.use(responseHandler, responseErrorHandler)

export default service

封装结构就是这样的，创建实例——请求、响应拦截器——暴露方法

三、使用

admin.js 文件

在这个文件中使用封装后的方法：

import request from '@/utils/request'

export function fetchList(query) {
  return request({
    url: 'your/request/url',
    method: 'get',
    params: query
  })
}

export function finishForm(formData) {
  return request({
    url: 'your/request/url11',
    method: 'post',
    data: formData
  })
}