axios封装

axios

一、axios

1、安装

CDN 方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

npm 方式

npm install axios --save

yarn 方式

yarn add axios --save

与 vue-axios 插件一起安装

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

npm install axios vue-axios

在 main.js 中使用

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

const app = createApp(App)

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

2、基本使用

配置封装 config-util.js

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

请求封装 http-util.js

拦截器根据需要

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

const instance = axios.create({
  baseURL: config.baseUrl.dev,
  timeout: 60000
})

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

// 响应拦截器
instance.interceptors.response.use(function (response) {
  console.log('得到的响应数据', response)
  return response
}, function (error) {
  console.log('响应错误', error)
  return Promise.reject(error)
})

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

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

返回数据封装 return-util.js

个人写的，不专业

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

测试 api

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

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

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

使用演示

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

<script>

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

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

<style>

</style>