axios封装

1.在src目录下新建api文件夹，新建api.js

 

2.在api.js中添加请求和相应拦截

//api.js (在src文件下自定义一个api.js)
import axios from "axios"

//创建一个axios对象
//const 创建一个只读文件
const instance = axios.create({
    baseURL: 'http://127.0.0.1:8000/',
    //请求超时
    timeout: 5000
})

//请求拦截
//所有的网络请求都会先走这个方法、
instance.interceptors.request.use(
    function (config) {
        // console.group('全局请求拦截')
        // console.log(config)
        // console.groupEnd();
        //获取token
        const token = localStorage.getItem('token')
        if (token) {
            config.headers.Authorization = "JWT " + token
        }

        return config
    },
    function (err) {
        return Promise.reject(err)
    }
);


//响应拦截
//所有的网络请求返回数据之后都会先执行此方法
instance.interceptors.response.use(
    function (response) {
        // console.group('全局响应拦截')
        // console.log(response)
        // console.groupEnd();  //这是一种格式
        return response
    },
    //如果失败
    function (err) {
        //存在请求失败
        if (err.response) {
            console.log(err.response)
            //请求失败状态码 == 500
            if (err.response.status == 500) {
                //跳转到首页
                window.location.href = 'http://127.0.0.1:8080/'
            }
        }
        return Promise.reject(err)

    }
);

3.封装路由

// p指给Register 传递的参数
// 一个文件里可以有多个 exprot  

// 注册
export const 自定义方法名 = p => { return instance.post('后端路由/', p) }

　// 获取手机验证码

  export const code = p => { return instance.get('reg/', p) }

4.在组件中引入自定义方法

<script>
import { 定义的方法名 } from 'api.js路径';
</script>

5.使用

定义的方法名().then(res => {
            　　调用成功后的操作  
            });