vue-cli 使用axios 模拟请求接口数据

前期准备
1、vue create 生成项目
2、安装express  、axios

一、 生产项目

vue create vuedemo

二、安装 express 、 axios

npm install express
npm install axios

三、配置项目

配置文件如下

1、添加data 数据

test.json 文件内容

{
  "code": 200,
  "data": {
    "name": "hezs",
    "age": 26
  }
}

2、 request.js 封装axios

import axios from 'axios'

var baseURL = 'http://localhost:8080'

const service = axios.create({
  baseURL: baseURL,
  timeout: 100000 // request timeout
})

service.interceptors.request.use(
  config => {

    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(

  response => {
    const res = response.data
    // console.log('resp:')
    // console.log(res)
    // if the custom code is not 200, it is judged as an error.
    if (res.code !== 200) {
      alert('!==200')
      return Promise.reject(res.message || 'error')
    } else {
      return res.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    let msg = error.message
    console.log(msg);
    return Promise.reject(error)
  }
)

export default service

3、新建api

import request from '@/utils/request'

export function testList(query) {
  return request({
    url: '/api/test',
    method: 'get',
    params: query
  })
}

4、在 vue.config.js 引入配置

const test = require('./data/test.json')
const express = require('express')
const app = express()
let apiRoutes = express.Router()
app.use(`/api`, apiRoutes)


module.exports = {
  //生成环境部署路径，默认为'/'
  publicPath: './',
  //当运行 build 时生成的生产环境构建文件的目录
  outputDir:'demo',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    before(app) {
      app.get('/test', (req, res) => {
        res.json(test)
      })
    }
  }
}

四、测试接口

在vue组件中

<template>
  <div class="hello">
   <div>
    <h1>测试接口数据</h1>
     <div>
       <span><b>name</b>: {{resData.name}}</span>
       <br>
       <span><b>age</b>: {{resData.age}}</span>
     </div>
   </div>
  </div>
</template>

<script>
import { testList } from '@/api/test'
export default {
  name: 'HelloWorld',
  data() {
    return{
      resData: {
        name: '',
        age: 0
      }
    }
  },
  mounted() {
    testList().then(res=>{
      console.log(res);
      this.resData = res
    }).catch(err=>{
      console.log(err);
    })
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

接口数据返回

av8d. it’s 666 !!!