基于axios进行二次封装

前言:思考:假设我们在项目中每一次请求都是直接使用axios,如果有一天我们要改用原生ajax请求,name代码改动的工程量是非常大的.但是,我们将axios统一封装起来,这样是不是简单许多呢?

为了让我们的代码更加灵活, 统一管理,通常我们会选择呢封装axios

一、封装axios

1创建文件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();