手摸手，教你封装一个快捷的Axios_手写axios封装

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

一、Axios 基本用法

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

Axios官网

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

npm:

$ npm install axios
1

yarn:

$ yarn add axios
1

2. 在项目的main.js中引入 Axios

import axios from 'axios'
1

3. 发起一个请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' })
    .then(function (response) { 
        console.log(response); 
        })
        // 错误捕捉
    .catch(function (error) { 
        console.log(error); 
    });
1
2
3
4
5
6
7
8

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

二、封装 Axios

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

import axios, { type Method } from 'axios'
1

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
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

3.使用

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

1
2
3
4
5
6
7
8