vue+axios+promise+mockjs开发

axios

axios 是基于promise的http库，可运行在浏览器端和node.js中

axios的特点
1、从浏览器中创建XMLHttpRequests
2、从node.js创建http请求
3、支持Promise API
4、拦截请求和响应（就是有interceptor)
5、转换请求数据和响应数据
6、取消请求
7、自动转换json数据
8、客户端支持防御XSRF

mockjs

实际开发中，前后端分离，前端需要后端的接口去完成页面的渲染，但是并不能等到后端成员写完接口再开始进行测试。大部分情况下，前后端需要同时进行开发。因此便需要mockjs制造随机数据来进行后端接口模拟

开发过程

1、搭建vue-cli脚手架

2、安装axios

npm install axios --save(或cnpm install axios --save)

3、创建公共模块API

新建js文件，创建公共模块api,并且加入拦截器（这里加入了登录拦截），注意不要忘记加export default axios

import axios from 'axios'

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (sessionStorage.token) {
      config.headers['x-auth-token'] = sessionStorage.token // 将token设置成请求头
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.code === 500104) {
      sessionStorage.token = ''
    } else if (response.headers['x-auth-token']) {
      sessionStorage.setItem('token', response.headers['x-auth-token'])
      sessionStorage.token = response.headers['x-auth-token']
    }
    return response
  },
  error => {
    return Promise.reject(error)
  }
)

export default axios

4、封装请求方法

可以新建一个api文件夹，在里面写请求方法

get请求

export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        }).then(res => {
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)        
        })    
    });
}

post请求

export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, qs.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

5、安装mockjs

npm install mockjs --save

6、在main.js中引用

require('./mock')

7、写mock模拟请求数据

新建mock文件夹，在这个文件夹下新建index.js文件，然后导入Mock，之后写mock数据，里面的data可以用通过导入json数据进行替换。（要注意mock模拟数据的格式，格式不同引用数据时的写法会有点不同）

import Mock from 'mockjs'

const info = {
  'id': '@guid',
  'name': '@cname'
}

Mock.mock('/api/test', 'get', {code: 0, data: info})

export default Mock

8、在app.vue中调用方法

或者用async await的方式，使代码更加简洁：

9、运行项目

npm run dev

在浏览器中查看控制台：

参考链接
【1】《vue+axios+promise实际开发用法》
【2】在vue-cli项目下简单使用mockjs模拟数据

github地址：
https://github.com/LisaNcu/axiosDemo.git