第一步安装：

npm install axios

第二步：创建一个api文件夹，然后在api文件夹创建api.js文件，封装axios

import axios from 'axios';

// token值从后台获取的密钥没有可以不传
// const token = ''
// 统一传token
// axios.defaults.headers['token'] = `${token}`;

axios.defaults.timeout = 30000;
axios.defaults.baseURL = 'https://goods.zzgoodqc.cn/';

// 添加响应拦截器
axios.interceptors.response.use(function (response) {

    //可以写if判断，提前拦截错误信息

    return response;

}, function (err) {

    return Promise.reject(err);
});


export function apiGet(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params,
            // headers: { token: token }
        }).then(res => {
            resolve(res.data);
        }).catch(err => {
            reject(err.data)
        })
    });
}


export function apiPost(url, params) {
    return new Promise((resolve, reject) => {
        axios({
            method: 'post',
            url: url,
            data: params,
            // headers: { token: token }
        }).then(res => {
            resolve(res.data);
        }).catch(err => { reject(err.data) })
    });
}

第三步：在api文件夹创建http.js文件从来存放接口方便统一管理

import { apiGet, apiPost } from './api';

//apiGet
export const getTables = query => {
    return new Promise((resolve, reject) => {
        apiGet('/index.php/index/goods/getTables', query).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    })
}


//apiPost
export const xiang = query => {
    return new Promise((resolve, reject) => {
        apiPost('/index.php/index/index/getmycenter', query).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    })
}

在页面调用

<script>
import { getTables, xiang } from "../api/http";
export default {
  data() {
    return {};
  },
  mounted() {
    getTables().then((res) => {
      console.log(res);
    });
    xiang().then((res) => {
      console.log(res);
    });
  },
};
</script>