封装ajax

利用npm安装axios

npm install axios --save

在src目录下创建ajax.js
ajax.js

import cookie from './utils/cookie.js'
var axios = require('axios')

export function getHost() {
    let host = location.origin + '/api'
    return host
}

export function headers() {
    let token = cookie.get('access_token')
    // console.log(token)
    let headers = {
      'Accept': 'application/json',
      'X-App-Id': 'dl_kzl_h5',
      'X-Access-Token': token
      // 'X-Session-Id': uuid.getUUID(),
    }
    return headers
}
var instance = axios.create({
    baseURL: getHost(),
    timeout: 6000
    // withCredentials: false
    // headers: headers()
})

  /**
 * 拦截器
 * 未登录拦截：登录态失效、或者抢登
 * 重定向到登录页面
 */
export function interceptor(res) {
    // TODO: 拦截码 需要确认 
    // 40100 未登陆
    if (res.data.code === 40100 || res.data.code === 101013) {
      // console.log('移除token')
      // router.replace('/')
      cookie.remove('access_token', '/')
      return true
    } else {
      return false
    }
}
/**
 * @param {String} url 请求路径
 * @param {objeck} params  请求参数
 * @param {function} success 数据回调成功函数
 * @param {function} fail 数据回调失败函数
 */
export function post(url, params, success, fail) {
    let requestUrl = getHost() + '/' + url
    let token = cookie.get('access_token')
    instance.defaults.headers.common['X-Access-Token'] = token
    instance.post(requestUrl, params).then(res => {
      interceptor(res)
      success(res.data)
    }).catch(error => {
      logError(error)
      fail()
    })
}

export function get(url, success, fail) {
    let requestUrl = getHost() + '/' + url
    let token = cookie.get('access_token')
    instance.defaults.headers.common['X-Access-Token'] = token
    instance.get(requestUrl).then(res => {
      interceptor(res)
      success(res.data)
    }).catch(error => {
      logError(error)
      fail()
    })
}

function logError(error) {
    console.log(error)
  }
  
  export default {
    getHost,
    headers,
    post,
    get
  }

将ajax.js 文件引入main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
import ajax from './ajax'

Vue.prototype.$ajax = ajax
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

配置host代理，获取请求时，需要一个ip，如果时在测试环境下，则通过代理获取ip，如果在正式环境下，则不会通过代理，直接location.origin获取ip。

配置代理我们只需要在根目录下创建vue.config.js文件，然后交给框架运行

配置内容如下：

module.exports = {
  // 代理配置
  devServer: {
    proxy: {
      '/api': {
        // 测试环境下请求需要的ip路径
        target: 'http://wx71432c1f75fca52f.dl.test1.cestcoco.com/api',
        ws: true,
        changeOrigin: true
        // pathRewrite: {
        //   '^/api': ''  //通过pathRewrite重写地址，将前缀/api转为/
        // }
      }
    }
  }

}

使用

this.$ajax.post('url', 
        params,  
        res => {
          //访问成功回调数据，处理
        },
        () => {
          //访问失败回调数据，处理
          this.$layer.msg('网络异常')
        })