vue 模块化开发

vue 模块化开发

安装axios
cnpm install axios --save

好处：
可以在在向后台请求接口前可以对数据进行处理
我们把api都写在一个接口上，便于后期维护、管理。

首先对axios进行二次封装
封装过程：在项目的src文件夹下创建文件夹（名称可以自定义） 在该文件夹下 新建js文件 文件名可以自定义
然后在该js文件中写入以下代码

serve.js

        import axios from 'axios'
        // var server = function() {
            var server = axios.create({
                baseURL: '',  //接口代理
                timeout: 10000  //请求接口超时时间
            })
           // 请求拦截 后台没有接收到请求 但是浏览器发出请求了 这个可以在拦截器写自己的逻辑或者添加请求头配置
            server.interceptors.request.use(config => {
                // console.log(config)
                // 可以写自己的对应的逻辑 
                // config.headers['my-token'] = '122fdasdjfawpoekroqp2k3l4maeid0woqke'
                //contentType的参考地址 https://www.cnblogs.com/tugenhua0707/p/8975121.html
                //config.headers.ContentType = 'application/json'

                // return 之后接口才会真正的连接后台接口 进行请求
                return config
            })
            //响应拦截 在后台给出相应数据后 在这里可以对数据进行预处理 还可以对错误代码字典进行预处理
            server.interceptors.response.use(response => {
                // console.log(response)
                // switch(response)
                // 可以写自己的判断逻辑
                return response.data.data
            }, (error) =>{
                console.log(error)
                switch(error) {
                    case 404:
                        alert('请求地址错误')
                    break;
                    case 500:
                        alert('服务器错误')
                    break;
                }
            })
        // }
        export default server

    设置请求头的意思就是 请求头中有自己的默认设置信息 例如 请求头中的参数内容类型默认为json类型 我们必要时可以设置成表单提交类型
    再比如 我们在通常项目中 用户的权限会涉及到token token需要携带在请求头中 则可以登录成功后获取的token加入到请求头中
    例如 config.headers['my-token'] = '122fdasdjfawpoekroqp2k3l4maeid0woqke'
    
    然后在src文件夹下创建api文件夹（文件夹可以随意命名） 在该文件夹下创建自己的api请求集合文件 （文件名称可以随意命名）
    然后导出自己的api集合
    然后在需要api的文件夹中 导入对应的api 

api.js

import server from './server'
var homeMix = function() {
    return new Promise((resolve, reject)=> {
        server.get('/home/mix').then(res => {
            resolve(res)
        })
    })
    
}
var navList = function() {
    return new Promise((resolve, reject) => {  
        server.get('/cate/recList?cid=&ct=').then(res => {
            resolve(res)
        })
    })
}
// getHomeMin().then(res => {

// })
export default {
    homeMix,
    navList
}

然后把api.js文件引入到相关的组件（import navList from ‘./api’）
在组件中使用

  navList.navList().then(res=>{   //利用promise的成功回调
                 console.log(res)  //这里就是你请求到的数据
            })