面试题——你有封装过axios请求吗？请描述一下

我们前端工作除了平常的一些写页面，经常做就是发网络请求，这些工作都非常的繁琐，那么我们可以自己封装一段代码，因为发送请求无非就是传入一个url地址和几个特顶字段，那么我们可以去实现一下。

我们先封装最底层的 方法，创建一个request.js文件

import axios from 'axios'

export function getData (url) {
return axios.get(url).then(res => {
return res
})
}

上面代码的意思是先引入axios，然后将请求地址 Url作为参数传入，将这个方法导出。

这是第一层封装，然后我们去看第二层封装，创建index.js这是作为媒介的存在

import { getData } from './request.js'

const shopList = getData('http://jsonplaceholder.typicode.com/posts')

export {
  shopList
}

上面代码的意思就是将底层封装好的方法引入，并传入地址，然后再往外抛

下面我们用一个方法去接收这些数据了

<template>
    <div>
        <a-button type="primary" @click="handleData()">获取数据</a-button>
    </div>
</template>

<script setup>

import { shopList } from '../../api'

async function handleData () {

  console.log(shopList)
}

</script>

注意，这里返回的是一个promise对象还不是我们想要的数据

然后我们要想取到内部的数据，我们可以使用 async await ,可以看下面代码

<template>
    <div>
        <a-button type="primary" @click="handleData()">获取数据</a-button>
    </div>
</template>

<script setup>

import { shopList } from '../../api'

async function handleData () {
  const data = await shopList.then(res => {
    return res
  })
  console.log(data.data)
}

</script>

看浏览器

以上就是对axios封装的描述了