vue axios封装及调用 （可复用）

安装axios 

npm i axios 
#or
pnpm i axios

utils/request.js

import axios from 'axios'
 
export const request = axios.create({
  baseURL: 'https://api.uomg.com/api/'
})

// 请求工具函数
export default (url, method, submitData) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  return request({
    url,
    method,
    // 1. 如果是get请求  需要使用params来传递submitData   ?a=10&c=10
    // 2. 如果不是get请求  需要使用data来传递submitData   请求体传参
    // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
    // method参数：get,Get,GET  转换成小写再来判断
    // 在对象，['params']:submitData ===== params:submitData 这样理解
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}


// 添加请求拦截器
request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // config.headers['token'] = 'token' || ''
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});


// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  console.log(response);
  return response.data;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

api/index.js

import  request  from '../utils/request'
 
export const getText = (data) => { return request('rand.qinghua', 'get', data) }

页面中调用接口

import {getText} from '@/api/index.js'

 methods: {
    async getAvatar(type){
      try {
        const res = await getAvatar(type,'json')
        console.log('getAvatar', res)
        // 保存数据
      } catch (err) {
        console.log('getAvatar', err)
      }
    }
}