vue 移动端完整项目搭建（五）前后端交互

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，尤雨溪大神也推荐在vue中使用。
首先安装axios:

npm install axios -s

然后在使用前还需对api请求做一定的封装（不然后续使用时会非常麻烦），首先在src目录下新建一个api文件夹，继续在该文件夹下新建一个request.js文件，具体情况如图所示：
![15NY4KD_IV6GCS7Q_H5VMQ.png

request.js代码如下：

import axios from 'axios'

// 超时时间
axios.defaults.timeout = 15000
// http请求拦截器
axios.interceptors.request.use(config => {
    // loading.open()
        return config
    }, error => {
    
    return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
    // loading.close()
    // let json = data.data
    // if(json.error == '403') {
    //     vm.$router.replace({ path: '/login' })
    // }
    // loadinginstace.close()
    return data
    }, error => {
        // loadinginstace.close()
        
    return Promise.reject(error)
})

export default axios

然后在man.js中引入并使用

import axios from './api/request'
//保持session
axios.defaults.withCredentials = true
Vue.prototype.$http = axios

现在就可以直接在项目中使用了，如：

this.$http.get().then().catch()