为了方便操作，我们把vue的ajax 进行封装

1、安装

npm install axios --save

2、在src下新建文件夹axios

3、新建文件fetch.js

import axios from 'axios' // 引入axios
import store from './../store/index' //注意由于需要用到store，需要携带token进行验证，所以需要引入store

export function fetch (options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      // instance创建一个axios实例，可以自定义配置，可在 axios文档中查看详情
      // 所有的请求都会带上这些配置，比如全局都要用的身份信息等。
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'token_header': store.getters.token // token从全局变量那里传过来
      },
      async: false,
      timeout: 30 * 1000 // 30秒超时
    })
    instance.interceptors.request.use(

      function (config) {
        // 在发送请求之前做些什么
        return config
      },
      function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
      }
    )
    // 响应拦截器
    instance.interceptors.response.use(
      function (config) {
        // 对响应数据做点什么
        if (config.data.state === '-1') {
          location.href = '/#/login'
        } else {
          return config
        }
      },
      function (error) {
        // 对响应错误做点什么
        return Promise.reject(error)
      }
    )
    instance(options)
      .then(response => {
        // then 请求成功之后进行什么操作
        resolve(response)
        // 把请求到的数据发到引用请求的地方
      })
      .catch(error => {
        console.log('请求异常信息：' + error)
        reject(error)
      })
  })
}

这样我们就可以直接所有的axios进行统一管理了，而且统一携带了token头

4、新建api.js

import { fetch } from './fetch' // 引用fetch.js
import api from './url' // 引用url.js
import qs from 'qs' //qs可以把  安装方法npm install qs 
const api={ //常用路径设置
 login:'/api'
}
//qs.parse()是将URL解析成对象的形式;qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
//注意下面如果是post需要使用data  如果get需要使用params
// 登录
export function login (data) {
  return fetch({
    url: api.login + '/login.php',
    method: 'post', // 请求方法
    data: qs.stringify(data)
  })
}
// 列表
export function contentlists (child) {
  return fetch({
    url: api.login + '/menu_ajax.php',
    method: 'get', // 请求方法
    params: {
      children: child || 0
    }
  })
}

5、使用方法