当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue中对axios进行封装

vue中对axios进行封装

2018年12月25日  | 移动技术网IT编程  | 我要评论

在刚结束的项目中对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)

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网