axios封装

axios封装

axios一、axios

1、安装

CD 方式

代码语言：javascript代码运行次数：0运行复制

<script src=".min.js"></script>

npm 方式

代码语言：javascript代码运行次数：0运行复制

npm install axios --save

yarn 方式

代码语言：javascript代码运行次数：0运行复制

yarn add axios --save

与 vue-axios 插件一起安装

vue-axios 是将 axios 集成到 Vue.js 的轻度封装，本身不能独立使用

代码语言：javascript代码运行次数：0运行复制

npm install axios vue-axios

在 main.js 中使用

代码语言：javascript代码运行次数：0运行复制

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios' // 导入 axios
import VueAxios from 'vue-axios' // 导入 vue-axios

ct app = createApp(App)

app.use(store)
app.use(router)
// 注意这里要将 VueAxios 放在前面，否则报错 Maximum call stack size exceeded
app.use(VueAxios, axios)
('#app')

2、基本使用

配置封装 config-util.js

代码语言：javascript代码运行次数：0运行复制

export default {
  baseUrl: {
    // 开发环境
    dev: 'xxx',
    // 生产环境
    prod: 'xxx'
  }
}

请求封装 http-util.js

根据需要

代码语言：javascript代码运行次数：0运行复制

import axios from 'axios' // 引入axios
import config from '@/api/utils/config-util.js' // 引入配置文件

ct instance = ({
  baseURL: config.baseUrl.dev,
  timeout: 60000
})

// 请求
instance.interceptors.request.use(function (config) {
  cole.log('发请求之前', config)
  return config
}, function (error) {
  cole.log('请求错误', error)
  return Promise.reject(error)
})

// 响应
instance.interceptors.respe.use(function (respe) {
  cole.log('得到的响应数据', respe)
  return respe
}, function (error) {
  cole.log('响应错误', error)
  return Promise.reject(error)
})

// get请求
export function get (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: data
      })
      .then((respe) => {
        resolve(respe)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

// post请求
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(
      (respe) => {
        resolve(respe.data)
      },
      (err) => {
        reject(err)
      }
    )
  })
}

返回数据封装 return-util.js

个人写的，不专业

代码语言：javascript代码运行次数：0运行复制

// 工具类
// 返回请求结果
export ct returnMsg = async promise => {
  try {
    ct res = await promise
    if (res.status === 200) {
      return res.data
    } else {
      return 'no 200 !'
    }
  } catch (e) {
    cole.log( + '====' + )
    if (.indexOf('404') !== -1) {
      return '404'
    }
    return 'error'
  }
}

测试 api

代码语言：javascript代码运行次数：0运行复制

import { get, post } from '@/api/utils/http-util.js'
import { returnMsg } from '@/api/utils/return-util.js'

export ct getHomeData = async data => await returnMsg(get('hello', data))

export ct getHomeData02 = data => post('hello', data)

使用演示

代码语言：javascript代码运行次数：0运行复制

<template>
  <div>
    主页面
    <h1>{{ str }}</h1>
  </div>
</template>

<script>

import { getHomeData } from '@/api/test-api.js'
import { ref, onMounted } from 'vue'

export default {
  setup () {
    ct str = ref('默认值')
    onMounted(async () => {
      ct data = await getHomeData(null)
      str.value = data
    })
    return { str }
  }
}
</script>

<style>

</style>

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除前往查看数据axiosdataimportreturn