axios配置封装

为什么要对axios封装？

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

（1）在src下面新建一个文件夹 http

   1.新建一个service文件

• service.interceptors.request.use 里面设置请求头（token） 请求拦截     
• service.interceptors.response.use   响应拦截

   代码如下：

import axios from 'axios'

import {baseUrl} from '@/config'

import {Toast} from 'vant'

let service = axios.create({

    baseURL: baseUrl, // url = base api url + request url

    timeout: 5000 // request timeout

})

let loading;

请求拦截

service.interceptors.request.use(config => {

    loading = Toast.loading({

        duration:10000,

        message:"加载中...",

        forbidClick:true,

    })

    //config.headers['Authorization'] = sessionStorage.getItem('token')

    return config

},error =>{

    console.log(error);

    return Promise.reject(error)

})

响应拦截

service.interceptors.response.use(res =>{

    loading.clear()

    return Promise.resolve(res)

},error =>{

    loading.clear()

    console.log('err'+error);

    return Promise.reject(error)

})

export default service     

   2.在接着新建一个api.js文件

    

export function smsCode(参数名){
    return service({
        url:接口地址,
        data:参数名,
        method:请求参数
    })
}

（2）在vue页面中引用

import { 方法名：如smsCode } from "@/http/api";

       async  方法名（）{

               let res=await    smsCode（）

        }

        console.log（res） 打印出来