vue-cli 项目添加Axios，请求接口

进入vue-cli4创建后的项目

安装axios

npm install -s axios

创建axios实例及请求拦截

• src下创建一个文件夹api，在这个文件夹下创建http.js(放axios实例)，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' // 使用实例
export function contentDetail(params) {
  return request({
    url: '/superwbs-server/tech/contentDetail',
    method: 'get',
    params
  })
}

在About页面，使用该接口

• 在src/views/About.vue代码，里面引入接口文件interface.js，及引入需要的接口方法名称。
• About.vue 代码修改如下:

<template>
  <div class="about">
    <h1>This is an about pageh1>
  div>
template>

<script>

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);
      })
    },
  }
}
script>