vue封装请求数据的接口

1.配置URL

（1）创建一个js文件

（2）区别测试环境和生产环境（正式环境）

let host;
if (process.env.NODE_ENV == 'development') {
   host = "xx.xx.xx.xx";
}else if (process.env.NODE_ENV == 'production') {
   host = "xx.xx.xx.xx"; //线上接口(生产环境包)
}

export const BASEURL = `http://${host}:端口号`;

2.封装接口

（1）创建network文件夹及base.js文件, network文件夹里全部放接口文件 ，在每个接口文件中引用base.js文件

（2）在base.js中封装

import axios from 'axios'
import { BASEURL } from '@/contant.js'

const instance1 = axios.create({
    baseURL: BASEURL
})

export default function request(config) {
    instance1.interceptors.request.use(config => {
        let token = window.localStorage.getItem("authToken");
        token && (config.headers.Authorization = token);
        return config
    },error => {
        return Promise.error(error);
      }
    )
    instance1.interceptors.response.use(result => {
        if (result.status === 200) {
          if (result.data.code == -1004) {   //登录过期
            window.location.replace('/');
            localStorage.removeItem('authToken')
          }else if(result.data.code == -1005) {  //用户未登录
            window.location.replace('/')
            localStorage.removeItem('authToken')
          }else if(result.data.code == -1006){   //当前用户无权限
            // return Promise.resolve(result.data.message);
          }
          return Promise.resolve(result);
        }else {
          return Promise.reject(result);
        }
    })
    return instance1(config)
}

 （3）新建一个接口文件position.js , 现在每个接口文件中可直接引用base.js中的request

import request from '@/network/base.js'

function list() {
    return request({
        method: "GET",
        url: "/api/list"
    })
}

function changePosition(config) {
    return request({
        method: "POST",
        url: "api/changePosition",
        data: config
    })
}

export default {
    list: list,
    changePosition:changePosition
}

3.在vue文件中使用

（1）引用

 (2)使用

loadData() {
      position.list().then((res)=>{
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }else{
          this.$message.warning(res.data.message);
        }
      }).catch((err=>{
        console.log(err)
      }))
    },

如有问题，欢迎留言！！！