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

Posted 2022-12-11 奥特曼　

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)