安装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)
}
}
}