浅谈vue中axios的封装


本文摘自PHP中文网,作者青灯夜游,侵删。

下面Vue.js教程栏目带大家了解一下vue中axios的封装。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

vue中axios的封装

第一步还是先下载axios

1

cnpm install axios -S

第二步建立一个htttp.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

import axios from 'axios';

import { Message } from 'element-ui';

 

axios.defaults.timeout = 5000;

axios.defaults.baseURL ='';

 

 

//http request 拦截器

axios.interceptors.request.use(

  config => {

    // const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie

    config.data = JSON.stringify(config.data);

    config.headers = {

      'Content-Type':'application/x-www-form-urlencoded'

    }

    // if(token){

    //   config.params = {'token':token}

    // }

    return config;

  },

  error => {

    return Promise.reject(err);

  }

);

 

 

//http response 拦截器

axios.interceptors.response.use(

  response => {

    if(response.data.errCode ==2){

      router.push({

        path:"/login",

        query:{redirect:router.currentRoute.fullPath}//从哪个页面跳转

      })

    }

    return response;

  },

  error => {

    return Promise.reject(error)

  }

)

 

 

/**

 * 封装get方法

 * @param url

 * @param data

 * @returns {Promise}

 */

 

export function fetch(url,params={}){

  return new Promise((resolve,reject) => {

    axios.get(url,{

      params:params

    })

    .then(response => {

      resolve(response.data);

    })

    .catch(err => {

      reject(err)

    })

  })

}

 

 

/**

 * 封装post请求

 * @param url

 * @param data

 * @returns {Promise}

 */

 

 export function post(url,data = {}){

   return new Promise((resolve,reject) => {

     axios.post(url,data)

          .then(response => {

            resolve(response.data);

          },err => {

            reject(err)

          })

   })

 }

 

 /**

 * 封装patch请求

 * @param url

 * @param data

 * @returns {Promise}

 */

 

export function patch(url,data = {}){

  return new Promise((resolve,reject) => {

    axios.patch(url,data)

         .then(response => {

           resolve(response.data);

         },err => {

           reject(err)

         })

  })

}

 

 /**

 * 封装put请求

 * @param url

 * @param data

 * @returns {Promise}

 */

 

export function put(url,data = {}){

  return new Promise((resolve,reject) => {

    axios.put(url,data)

         .then(response => {

           resolve(response.data);

         },err => {

           reject(err)

         })

  })

}

第三步

在main.js中引入

1

2

3

4

5

6

7

import axios from 'axios'

import {post,fetch,patch,put} from './utils/http'

//定义全局变量

Vue.prototype.$post=post;

Vue.prototype.$fetch=fetch;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;

最后在组件里直接使用

1

2

3

4

5

6

7

8

mounted(){

    this.$fetch('/api/v2/movie/top250')

      .then((response) => {

        console.log(response)

      })

  },

 

//其余的方法一样

相关推荐:

2020年前端vue面试题大汇总(附答案)

vue教程推荐:2020最新的5个vue.js视频教程精选

更多编程相关知识,请访问:编程教学!!

以上就是浅谈vue中axios的封装的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap与vue区别

vue style中使用data中的变量的方法详解

vue bootstrap区别

vue哪一年出来的

vue.use中发生了什么

vue组件中如何引入css文件

vue watch用法是什么

vue.js支持ie9吗

.vue 是什么

vue 中使用分页

更多相关阅读请进入《vue》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...