【vue3】 axios封装使用

前面的废话，简称前言

Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

作为一个前端开者，我们除了要布局，还要跟后端开发者做数据交互。这时，我们就要用过axios请求数据了~~

话不多说，我们动手封装使用axios吧~~

动手

1.安装

npm install --save axios vue-axios

2.在根目录上新建 api文件夹，在api文件夹中新建 axios.js 和 httpHelper.js

axios.js 用于初始化axios实例

//axios.js 
import axios from "axios";

// 1.创建axios实例
const axiosInit = axios.create({
  // 设置超时时间
  time:2000
})

// 2.请求拦截器
axiosInit.interceptors.request.use((config) => {
  //在发送之前做点什么
  return config
}, (error) => {
  //对请求错误做点什么
  return error
})

// 3.相应拦截器
axiosInit.interceptors.response.use((response) => {
  return response
})

// 4.导出
export default () => axiosInit

httpHelper.js 用于封装请求方法

import axios from 'axios'

const axiosInit = axios.create()
const baseURL = 'https://autumnfish.cn' //后台路径（这是一个开源的段子接口）
const httpHelper = {}
// 封装get方法（post类似）
httpHelper.get = (apiUrl, params, succCallback, errCallback) => {
  let headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  }
  let httpUrl = baseURL + apiUrl
  axiosInit.get(httpUrl, params).then(
    (res) => {
      if (succCallback) {
        succCallback(res)
      } else {
        console.log(res)
      }
    },
    (err) => {
      // alert(httpUrl)
      if (errCallback) {
        errCallback(err)
      }
    }
  )
}

export default httpHelper

3. 在页面上调用接口~

<script setup>
import httpHelper from '../api/httpHelper'

httpHelper.get('/api/joke', {}, function (res) {
  console.log('httpHelper.get', res)
})
</script>

4.最后的最后，我们成功拿到接口上的数据啦~

在这里插入图片描述