Vue 封装 axios 数据请求和处理

1、封装asiox 之方法  request

//导入axios
import axios from "axios"; 

export function request(config, souccess, failure) {

    //创建通信请求
    const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',  
            method: 'GET',  //请求
            timeout: 5000    //延迟时间
        })
        //axios 拦截器 的作用
        //请求拦截
    instance.interceptors.request.use(config => {
            //成功

            //1、比让config 中的一些信息不符合服务器的要求  
            // todo

            //2、比如每次发送网络请求时 ，都希望弹出一个显示请求的界面
            //todo

            //3、某些网络请求（比如登录的token ） ，必须携带一些特殊的信息
        

           //判断是否是在进入登入页面
           if (config.url !== 'login') {

             config.headers[
                "Authorization"
            ] = localStorage.getItem("token");

           }
    


            return config //拦截成功 并且返回回去
        }, err => {

            //失败
            config.log(err)

        })
        //响应拦截
    instance.interceptors.response.use(res => {

        return res;
        //成功

    }, err => {
        //失败

    })


    instance(config).then(res => {
        souccess(res)

    }).catch(res => {
        failure(res)
    })

}

2、数据请求

//导入
import { request } from "./network/request"

//发送请求
request({
        url: '/home/multidata',

    }, res => {
        console.log("成功：" + res)
    }, eer => {
        console.log(err)

    })

3、 图片请求和上传

  <!-- html 代码 -->
 <el-tab-pane name="4" label="商品图片">
            <el-upload
              action="http://127.0.0.1:8888/api/private/v1/upload"
              :headers="headers"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handlesuccess"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-tab-pane>


data{

return {
  headers: {
        //图片上传必须重新设置token
        Authorization: localStorage.getItem("token"),
      }}
}