安装axios

npm install axios -D

创建axios实例

在src下创建api文件夹并创建http.js、interFace.js

http.js

import axios from ‘axios‘
// 创建axios实例
const service = axios.create({
  // baseURL: baseUrl, // api 的 base_url
  baseURL: ‘https://www.superwbs.com‘, // api 的 base_url
  timeout: 300000 // 请求超时时间
})
// request 拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)
// response 拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    console.log(‘err‘ + error) // for debug
    return Promise.reject(error)
  }
)
export default service

interFace.js

import request from ‘./http‘ // 使用实例

//get方法
export function contentDetail(params) {
  return request({
    url: ‘/superwbs-server/tech/contentDetail‘,
    method: ‘get‘,
    params
  })
}

//post方法
export function postGetUserAll(params) {
  return request({
    url: ‘/superwbs-server/tech/contentDetail‘,
    method: ‘get‘,
    data: params
  })
}

调用接口

import { contentDetail } from ‘@/api/interface‘ // 引入接口

export default {
  data(){
    return {};
  },
  created(){
    this.getData();
  },
  methods:{
    getData(){
      let postData = {id:35} // 请求参数
      contentDetail(postData).then(data => {
        console.log(data);
      })
    },
  }
}

本文参考链接原文

原文未给出post方法的写法，本文在interFace.js已给出

如果不想使用实例调用axios可以用以下方法

vue-Cli main.js配置axios

main.js 示例

import Vue from ‘vue‘
import App from ‘./App.vue‘
import router from ‘./router‘
import store from ‘./store‘
import axios from ‘axios‘

Vue.config.productionTip = false
Vue.prototype.axios = axios
// 组件中通过使用this.axios调用

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount(‘#app‘)

组件中调用

getUserAll() {
      this.axios.post(‘http://localhost:8080/user/login‘, {
        userName: ‘admin‘,
        passWord: ‘admin‘
      }, {
        headers: {"Content-Type": "application/json"}
      }).then(function (response) {
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      });
}

Vue-Cli 配置 axios，创建axios实例

原文：https://www.cnblogs.com/lambertlt/p/14871283.html