全栈技巧(一)vue 封装全局http

安装axios npm install axios --save

新建一个js文件任意取名，这里是http.js

import { Message } from 'element-ui';  //element库的消息提示，可以不用

//创建axios实例
var service = axios.create({
    baseURL: 'https://www.xx.com/v1/', 
    timeout: 5000, 
        headers: {
        'content-type': 'application/json',
        "token":'14a1347f412b319b0fef270489f'
    }
}) 
export default {
    //get请求，其他类型请求复制粘贴，修改method
    get(url, param) {
        return new Promise((cback, reject) => {
            service({
                method: 'get',
                url,
                params: param,
            }).then(res => { 
                              //axios返回的是一个promise对象 
                var res_code = res.status.toString();
                if (res_code.charAt(0) == 2) {
                    cback(res);   //cback在promise执行器内部
                } else {
                    console.log(res, '异常1')
                }
            }).catch(err => {
                if (!err.response) {
                    console.log('请求错误')
                                        //Message是element库的组件，可以去掉
                    Message({
                        showClose: true,
                        message: '请求错误',
                        type: 'error'
                    });
                } else {
                    reject(err.response); 
                    console.log(err.response, '异常2')
                }
            })

        })
    }
} 

main.js中引入这个文件，做全局使用
prototype属性是JS用法，每一个构造函数都有一个属性叫做原型(prototype),默认情况下prototype属性会默认获得一个constructor(构造函数)属性

import Vue from 'vue'
import App from './App.vue' 
import http from './http.js'   //axios实例化后引入取名http
 
Vue.prototype.http = http   //放入全局
 
new Vue({ 
  render: h => h(App)
}).$mount('#app')
组件中调用封装的axios方式：

<script>
//生命周期函数
 mounted (){      
    this.http.get('banner/1').then(res=>{
        console.log(res.data)
    }) 
  } 
</script>