vue 调接口 axios配置

第一步：vue里安装axios  

 npm install axios --save

第二步：在main.js中引入

import axios from 'axios'
Vue.prototype.axios = axios

第三步：在src文件下创建api文件夹，创建request.js

import axios from 'axios';

const service = axios.create({
    timeout: 2000,
});
// 请求拦截器
service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
// 响应拦截器
service.interceptors.response.use(
    response => {
        //拦截到成功的数据
        return response.data;
    },
    error => {
        //拦截到失败的数据
        return Promise.reject(error);
    }
);
export default service;

第四步：在vue.config.js中配置代理 

module.exports = {
  devServer: {
    proxy: {
      '/pandroidapi/lightweight/*': {   //地址的开头都是相同的
        target: 'http://192.168.xxxxxxxxxx',//接口代理地址
        changeOrigin: true,
        ws: false,
        secure: false,
      }
    }
  }
}

第五步：在api文件夹创建index.js 写函数

import service from "./request";
export const testTransfer = () => service({
    url: '/pandroidapi/lightweight/post/xxxxxxxx',
    method: 'get',
    params: {
        modelId: "1042128316091334656"  //要传的参数
    }
})

第六步，在vue文件中调用   此时可以在浏览器的network中看见

import { testTransfer } from '../../src/api/index'

  mounted() {
    testTransfer()
   }