vue axios的使用 及封装

1.npm/cnpm安装

$ npm install axios

安装成功

2.main.js引入

// 引入vue
import Vue from 'vue'
//引入模板
import App from './App'
//引入router
import router from './router'
//引入axios
import axios from 'axios'
Vue.prototype.$axios=axios

Vue.config.productionTip = false
new Vue({
    el: '#app',//index.html的id
    router,
    template: '<App/>',//模板--组件调用标签
    components: { App },//组件--模板调用的
})

3.使用

        created() {
            // axios
            this.$axios({
                url: 'http://192.168.1.135:8000/v1/user',
                method: 'get',
                headers: {
                    'Accept': 'application/json',
                    'Authorization':'Bearer 123'    
                },
                data: {
                },
                
            })
            .then(res=>{
                console.log(res.data)
            })
        },

更多时候用方法请参考https://www.kancloud.cn/yunye/axios/234845

4.封装

每次使用axios是都要把所有的配置写一遍很是麻烦且不方便维护
所以将axios封装一下方便使用

(1.)在main.js同级新建base.js(自定义命名)

(2.)在main.js中引入

import base from './base'
通过全局方法 Vue.use() 使用插件
Vue.use(base);

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import base from './base'
Vue.prototype.$axios=axios

Vue.use(base);

Vue.config.productionTip = false

var main=new Vue({
    el: '#app',//index.html的id
    template: '<App/>',//模板--组件调用标签
    components: { App },//组件--模板调用的
})


// index.html-->main.js-->App.vue(组件)

(3.)封装(在base.js中)

url, method, data, success, header
请求地址,请求方法,参数,请求结果处理,请求头

export default {
    install(Vue) { 
        //请求前缀
        Vue.prototype.$axios.defaults.baseURL = 'http://192.168.1.135:8001/index.php?r=';
        //设置超时时间
        Vue.prototype.$axios.defaults.timeout = 10000;
        //请求封装
        Vue.prototype.request = function(url, method, data, success, header) {
            var that=this;
            this.$axios({
                    url: url,
                    method: method,
                    headers: header || {
                        'Accept': 'application/json'
                    },
                    data: method=='post'?JSON.stringify(data):{},
                    params:method=='get'?data:{}
                })
                .then(res => {
                    if (success) {
                        success(res.data);
                    }
                })
                .catch(res=>{
                    console.log(res)
                })
        }
    }
};

(4.)使用

封装完毕如何使用呢

post

                this.request('user/login','post',{
                    username:this.username,
                    password:this.pwd
                },function(res){
                  //结果处理success
                  console.log(res)
                });

this指向的是vue

分别对应

url:user/login 由于在封装的时候已经设置了Vue.prototype.$axios.defaults.baseURL = 'http://192.168.1.135:8001/index.php?r=';所以这里请求的完整地址是http://192.168.1.135:8001/index.php?r=user/login

method:post

data:{
username:this.username,
password:this.pwd
}

success:function(res){
//结果处理success
console.log(res)
}

header:这里我们传的为空
所以直接在封装方法里面匹配到
{
'Accept': 'application/json'
}

get

                   this.request('home','get',{
                      key:'value'
                    },
                    function(res){
                        console.log(res);//打印结果
                    })

url:http://192.168.1.135:8001/index.php?r=home

method:get

data:{
key:'value'
}

axios的get传参为params,post为data,在封装的时候做了处理

image.png

Axios 使用说明https://www.kancloud.cn/yunye/axios/234845
参考文档根据自己需要进行改动