手摸手，教你封装一个快捷的Axios

最新推荐文章于 2024-11-04 13:30:00 发布

原创最新推荐文章于 2024-11-04 13:30:00 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #ajax

文章介绍了如何在项目中使用Axios进行网络请求，并详细讲解了如何封装一个公用的Axios工具函数，简化每次发起请求的步骤。通过在公用方法文件中导入Axios，然后定义一个request方法，接受请求地址、方法和参数，根据请求方法是GET还是POST来决定数据应放在params还是data中。最后展示了如何使用封装后的request方法进行请求操作。

手摸手，教你封装一个快捷的Axios

一、Axios 基本用法

相信大家对于Aixos都非常熟悉，一个基于promise的网络请求库。

Axios官网

1.可以使用以下命令将Axios下载到项目中：

npm:

$ npm install axios

yarn:

$ yarn add axios

在项目的main.js中引入 Axios

import axios from 'axios'

发起一个请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' })
    .then(function (response) { 
        console.log(response); 
        })
        // 错误捕捉
    .catch(function (error) { 
        console.log(error); 
    });

这样发一次请求需要写一次请求过于费时，那么我们来封装一个公用的 Axios 工具函数

二、封装 Axios

首先在公用方法的的js（ts）文件中导入Axios

import axios, { type Method } from 'axios'

2.封装 (注意看代码注释)

// 导出一个 request 方法供使用
// 传入三个参数 1. 请求地址 2.请求方法  3. 请求参数（可空）
export const request  = (url:string,method:Method = 'GET',submitData?:object) => {

// 返回 request 方法，参数传入的参数
  return instance.request({
    url,
    method,
    // [] 代表参数可空 判断是否为 Get 请求
    [method.toUpperCase() === 'GET' ? 'params' :'data']:submitData
  })
}

3.使用

request('user/userList', 'get', { pageTotal:10 } )
    .then((res)=> {
        console.log('请求成功',res)
    })
    .catch((err)=> {
        console.log('请求失败',err)
    })