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

最新推荐文章于 2024-07-24 23:00:08 发布

lucky-2000

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量199

点赞数

文章标签：前端 vue.js ajax

本文链接：https://blog.csdn.net/While1170/article/details/130111820

版权

手摸手，教你封装一个快捷的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)
    })