vue中axios怎么封装axios???

• 首先在创建项目的src的目录下创建http文件
• 在http文件中创建request.js，api.js俩个文件
• request=>

import axios from "axios"

// 创建axios实例
const service = axios.create({
baseURL:'https://www.365msmk.com',
timeout:3000
})

// 请求拦截
service.interceptors.request.use(config=>{
// config.headers['aa任意']='1234567897dsfdgfbhgjhk'
console.log('请求被拦截',config)
return config
},error=>{
return Promise.reject('请求出错，请检查')
})

// 响应拦截
service.interceptors.response.use(res=>{
// console.log('响应拦截')
return res
},error=>{
return Promise.reject('出错啦',error) // 接口错误走这个接口
})

export default service

• api.js=>

import request from "./request"
import qs from "qs"
// 封装常用得业务接口
//封装的第一个接口
export function courseClassify(){
return request({
url:"/api/app/courseClassify",
method:'get'
})
}
//封装的第二个接口
export function courseDetail(info){
// Object.keys(info)[0]:也就是获取 basis_id
const url = `/api/app/courseInfo/${Object.keys(info)[0]}=${info.basis_id}`
return request({
url:url,
method:'get',
})
}

• 在需要用的组件中引入
  eg:import {courseClassify,courseDetail} from “@/http/api”
• 定义一个方法，在方法触发的时候获取数据也可以在vue函数钩子里面获取
  eg:

methods:{
getData(){
// 获取courseClassify信息
courseClassify().then((res)=>{
console.log('课程信息',res)
})
//获取courseDetail信息
let info = {basis_id:287}
courseDetail(info).then((res)=>{
console.log('课程详情信息',res)
})
}
}