axios封装 （axios拦截，api统一管理）

首先在 src下新建 文件夹如 http 里面有
request.js 用来封装axios
api.js 用来放置我们的接口请求

然后就可以开始操作了
现在request.js里操作

先安装axios npm i axios --save

环境切换

创建config目录和src同级
config里创建env.development.js
env.production.js
env.test.js

如env.development.js

module.exports={
    baseUrl:' http://www.devele.com:4456' //开发环境用到的baseurl
}

切换环境
在request.js

 import axios from "axios" // 引入axios
import store from "@/store/index"  //引入vuex
import { Toast } from "vant"  // 引入vant的轻提示

// 环境的切换
const {baseUrl}=require('../config/env.'+process.env.NODE_ENV);

如果切换报错 可能我们还需要 跨域处理 vue.config.js

并且还需要在package.json里修改添加

 "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode testing"
  },

创建axios实例

 const instance = axios.create({
    timeout:5000,
    baseURL:``
})

添加请求拦截
使用 axios实例.interceptors.request.use(成功回调,失败回调);
我们可以在请求拦截中开启loading动画，判断用户是否登录，以及携带token

instance.interceptors.request.use(config=>{ // config（成功的回调） 就是我们一些请求的配置  
    // vant loading动画

    Toast.loading({
        message:'加载中...',
        forbidClick:true,
        loadingType:'splinner',
    })
    if(store.state.token){
        // vuex中的token是否是空，如果不为空就设置请求头，携带token
        config.headers.Authorization = store.state.token
    }
    // 一定要返回config，否则报错
    return config
},error=>{
    // 失败回调
    return Promise.reject(error)
})

响应拦截
使用 axios实例.interceptors.response.use(成功回调,失败回调);
我们在响应拦截中，可以关闭loading动画，判断返回的状态码来做响应的操作

instance.interceptors.response.use(response=>{ //成功的回调
    // 关闭vant动画

    Toast.clear();
    // 必须返回 返回值
    return response
    
}, 
//失败回调

// function (error){
//     // 必须有返回值
//     return Promise.reject(error)
// }
error=>{
    return Promise.reject(error)
}
)

导出封装的axios函数

export default (url,method,params)=>{
    // 返回我们的axios实例
    return instance({
        url:url,
        method:method,
        params:params,
        
    }).then((res)=>{// res 我们后端返回的数据

        // 如果我们返回的数据状态码为200-300之间就是成功
        if(res.status>=200&&res.status<300){
            return res
        }else{
             // 失败返回一个Promise对象
            return Promise.reject(res.data)
        }
        // 请求失败返回一个Promise对象
    }).catch(err=>{
        return Promise.reject(err)
    })
}

---

api统一管理
方便后期管理 接口（修改）、重复利用

import http from './request'  // 引入封装好的axios

async function getlist(obj){  //obj 可传参
    let res = await http('接口地址','方法',{需要传的参数})
    return res
}

export {
    getlist,  // 导出
}

然后在哪用就

 <script>
import {getlist} from "../http/api"  // 引入即可
export default {
  data(){
    return{

    }
  },
  mounted(){
    getlist().then((res)=>{
      console.log(res);
    })
  }
}
</script>