封装axios

封装axios
一、创建文件utils/request.js

// 基于 axios 封装的请求模块
import axios from 'axios'
// 新建一个新的axios实例
const newAxios = axios.create({//创建返回一个新的axios函数对象
　　baseURL: 'http://123.57.109.30:8000' // 配置你的项目基地址
})

// 导出自定义函数, 参数对象解构赋值
export default ({ url, method = 'GET', params, data, headers }) => {
　　return newAxios({
　　　　url: url,
　　　　method: method,
　　　　params: params,
　　　　data: data,
　　　　headers: headers
　　})

// 以后换库, 只需要改这里, 逻辑页面不用动, 保证代码的复用性和独立性(高内聚低耦合)
// return $.ajax({
// 　　url: url,
// 　　type: method,
// 　　data: data,
// 　　header: headers
// })
}

 

二、封装接口使用封装后的axios

import {request} from '@/utils/request.js' //@表示src文件夹
// 接口方法, 只负责调用一个接口, 返回一个Promise对象
export const allChannelListAPI = () => {
　　return request({
　　　　url: '/v1_0/channels'
　　})
}

 

三、测试一下

在main.js中导入过来, 尝试发起一个请求

import { allChannelListAPI } from '@/api'
async function myFn(){
　　const res = await allChannelListAPI()
　　console.log(res) // 后台返回的频道数据
}
myFn();

 

————————————————
版权声明：本文为CSDN博主「多多的小宝贝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45371730/article/details/121903017