axios如何封装

axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。

首先我们需要在src目录下新建一个http文件夹

在http文件夹中新建三个js

在sevive.js 设置我们的基地址以及请求拦截器及响应拦截器

import axios from 'axios'
import { Toast } from 'vant'
import {baseUrl} from '@/config'

const service = axios.create({
  baseURL: baseUrl, // url = base api url + request url
//   withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
let loading
//请求拦截器
service.interceptors.request.use(config=>{
   loading = Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
  config.headers['Authorization'] = sessionStorage.getItem('token')
  return  config
},error => {
      // do something with request error
      console.log(error) // for debug
      return Promise.reject(error)
    
})
//响应拦截器
service.interceptors.response.use(res=>{
  //关闭loading
   loading.clear()
   return Promise.resolve(res)
},error=>{
   loading.clear()
   console.log('err'+ error)
   return Promise.reject(error)
})
// module.export= service;
export default service

在api.js中设置我们的请求的定义的方法

import service from './service'
import require from './require'
//定义请求方法，然后导出
//获取验证码
export function smsCode(arg){
    return service({
        url:require.smsCode,
        data:arg,
        method:'post'
    })
}
export function login(){
    return service({
        url:require.login,
        data:{},
        method:'post'
    })
}
export function bottom(){
    return service({
        url:require.bottom,
        data:{},
        method:'get'
    })
}
export function teacher(){
    return service({
        url:require.teacher,
        data:{},
        method:'get'
    })
}

 在require.js中设置我们的请求路径

module.exports={
    smsCode:'/smsCode',
    login:'/login',
   bottom : '/nav/bottom',
   teacher:'/recommend/appIndex'
}

最后你需要在那个页面使用这个路径在那个页面去引入！

import {smsCode,login} from '@/http/api.js'

为什么要将这个封装的方法分来写有什么好处?

为了更好的维护，每个公司都有测试人员，我们只需要改变它的路径就可以！