vue + axios---封装一个http要求

2024年1月5日 249次阅读 来源: chen

在运用vue开辟时，官方引荐运用axios来要求接口

//    axios官方地点
https://github.com/axios/axios

然则axios并不像 vue-resource 一样具有install，即不能直接 Vue.use(axios) 来运用，所以须要我们本身依据axios来写一个具有install要领的Http库。

1.装置axios

npm install axios

2.建立Http.js文件

import axios from 'axios'

export default {
    install (Vue) {
    //    install要领，向Vue实例中增加一个$http要领
        Vue.prototype.$http = axios
        Vue.$http = axios
    },
    $http: axios
}

export const Http = axios

3.援用

import Vue from 'vue'
import Http from './Http'

Vue.use(http)

云云，就能够在vue中直接运用axios了

4.axios阻拦器
在开辟过程当中，会须要设置一些要求头，大众参数等，或许须要对要求效果举行一致处置惩罚（比方错误处置惩罚），这时候就能够用到axios阻拦器

建立interceptor.js文件

import axios from 'axios'

let interceptor = ''
export const myInterceptor = interceptor

//    设置要求阻拦器
export const setInterceptor = function (response) {
    axios.interceptors.request.use((config) => {
        config.headers.Authorization = token    //设置要求头Authorization
        config.headers.Accept = 'application/json'    //设置要求头Accept 
       /*
           详细设置须要依据现实开辟状况来设置
       */
        return config
    })
}
//    移除要求阻拦器
export const clearInterceptor = function () {
  axios.interceptors.request.eject(myInterceptor)
}

ps：上例只树模了axios的要求阻拦，复兴阻拦时一样的处置惩罚体式格局
ps：在interceptor中暴露myInterceptor、setInterceptor与clearInterceptor 的原因是轻易随时作废与设置

5.设置axios默许要求地点

axios.defaults.baseURL = 'http://172.0.0.1'

虽然说险些都是运用webpack代办的体式格局来设置要求地点，但此体式格局依旧有时会用到

    原文作者：chen
    原文地址: https://segmentfault.com/a/1190000017352304
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞