前端调用webapi（三）

vue前端调用webapi的问题：（根据vue-admin-template)做的调整

1、引入axios（解决调用方法创建问题）

　在request.js中，引入axios,并创建实例

import axios from 'axios'

// create an axios instance

const service = axios.create({

  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

  // withCredentials: true, // send cookies when cross-domain requests

  timeout: 5000 // request timeout

})

2、拦截机制的配置定义，这里定义的是每次申请需要的携带的参数内容

service.interceptors.request.use(

  config => {

    // do something before request is sent

    if (store.getters.token) {

      // let each request carry token 让每一个request携带token

      // ['X-Token'] is a custom headers key // x-Token是一个客户端头关键字

      // please modify it according to the actual situation//请根据实际情况定义

      config.headers['auth'] = getToken()

    }

    return config

  },

  error => {

    // do something with request error

    console.log(error) // for debug

    return Promise.reject(error)

  }

)

         用于拦截器创建，目的是让每一个request申请都携带token内容，

         token内容，在登陆时获取，并写入内存

3、去除mock拦截（解决404问题）根目录下main.js相关mock内容注释掉

               // mock 模拟数据，这里要清除 否则会产生404错误

// if (process.env.NODE_ENV === 'production') {

//   const { mockXHR } = require('../mock')

//   mockXHR()

// }

4、修改VUE_APP_BASE_API

　　　　　　　　　VUE_APP_BASE_API ='http://localhost:8088/api/'　

5、修改request.js中拦截器的返回值内容，根据自己定义的返回状态来定义是不是又返回值，这里可以考虑权限问题

service.interceptors.response.use(response=>)

原模板下的

  if (res.code !== 20000) 一直报错，是因为后端没有返回code这个内容，这里取不到。而res.code的内容时自己定义的，

根据模板，后端webapi至少要有几个状态判断，未登录、其他客户端登陆（非本系统意外的接口调用）、Token过期。

正常登陆的返回码时2000

6、接口调用

　　　　　　　　因为定义了VUE_APP_BASE_API ,在接口调用的时候要注意，拼接结果

　　　　　　　　

 Test() {

      console.log('开始数据测试')

      // 測試已經調用成功了，但是返回的數據怎麽顯示出來

      this.$ajax

        .get('/api/test/')

        .then(res => {

          console.log('数据获取成功')

          console.log(res)

        })

    },