vue中对axios进行封装

2018-12-27 07:41:50来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目),

以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改

src/config.js

//api接口前缀
export const apiBaseUrl = 'http://xxx.xxx.xxx.xxx:8888/test/'

src/axios.js

import axios from 'axios'
import qs from 'qs'
import { apiBaseUrl } from './config.js'



//请求拦截器
axios.interceptors.request.use(function (param) {
    return param
}, function (error) {
    // 请求错误
    return Promise.reject(error)
})


// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    return response.data
}, function (error) {
    // 响应错误
    return Promise.reject(error)
})

// 封装axios--------------------------------------------------------------------------------------
function apiAxios(url, params) {
    let httpDefault = {
        method: "POST",
        baseURL: apiBaseUrl,
        url: url,
        data: qs.stringify(params),
    }

    return new Promise((resolve, reject) => {
        axios(httpDefault)
            // 此处的.then属于axios
            .then((res) => {
                resolve(res)
            }).catch((response) => {
                reject(response)
            })
    })
}


export default {
    install: function (Vue) {
        Vue.prototype.$axios = (url, params) => apiAxios(url, params)
    }
}

src/main.js

import axios from "@/axios.js"

Vue.use(axios)

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:广告代码教你不影响网页加载速度的步骤

下一篇:撩课-Web大前端每天5道面试题-Day19