vue-service-async v0.1.6

vue-service-async

网络请求功能($http)

Installing

Using npm:

$ npm install vue-service-async

Example

在脚手架的入口文件main.js

import Vue from 'vue'
import {pAjax} from 'vue-service-async';
Vue.use(pAjax);

常用请求 ---支持 get 请求

this.$http.get(url,params).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

支持 post 请求

this.$http.post(url,params).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

更多请求

//基本方式
const opt={
    method:'put',
    url:'http://xxx/xxx'
}
this.$http.request(opt).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

//携带数据
const data={name:'pmj'}
const opt2={
    method:'post',
    url:'http://xxx/xxx',
    data
}
this.$http.request(opt).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

相关配置

import Vue from 'vue'
import {pAjax} from 'vue-service-async';
Vue.use(pAjax);

//建议将以下文件抽离成单文件
Vue.prototype.$http.config={
    baseUrl:'',
    timeout:'',
    headers:''
}
//或者 只配置单项
//Vue.prototype.$http.config.baseUrl='http://xxx'

拦截器配置

import Vue from 'vue'
import {pAjax} from 'vue-service-async';
Vue.use(pAjax);

//建议将以下文件抽离成单文件

//请求拦截器
const fn1=function(request){
    //做点什么
    return request
}
const error1=function(err){
    //错误处理

    return Promise.reject(err);
}
Vue.prototype.$http.interceptors.request=[fn1,error1] 


//响应拦截器
const fn2=function(response){
    //做点什么
    return response
}
const error2=function(err){
    //错误处理

    return Promise.reject(err);
}
Vue.prototype.$http.interceptors.response=[fn2,error2] 

将配置分离示例

分离为request.js

import Vue from 'vue'
import { pAjax } from '../plugin'
Vue.use(pAjax)
export default function () {
    //回调函数不得使用箭头函数，否则this无指向
    Vue.prototype.$http.configHttp(function () {
        this.config.timeout = 2000;
        this.config.baseURL='xxx'
        this.interceptors.request = [
            function (config) {
                return config;
            },
            function (err) {
                window.console.log(err)
            }
        ];
    })
}

main.js中

import Vue from 'vue'
import App from './App.vue'
import initHttpServe from 'request.js'
initHttpServe()

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')