vue项目axios的封装和使用_vue使用axios封装

基于vue/cli3.0+脚手架搭建Vue项目(04)

---

---

前言

---

一、axios简介

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。

二、axios封装

1.安装axios依赖

npm install axios
1

2.axios封装

src目录下新建api文件夹,utils文件夹,request.js文件：

request.js代码：

import axios from 'axios'

// 创建axios实例
const HTTP = axios.create({
    baseURL: '/tg_management',
    timeout: 60000
})

// 请求拦截
HTTP.interceptors.request.use(config => {
    //设置请求头信息
    let token = localStorage.getItem('token') || ''
    let uuid = localStorage.getItem('uuid') || ''
    const headersOption ={
        token,
        uuid
    }
    config.headers = Object.assign(config.headers, headersOption)
    return config
}, err => {
    console.log(err);
})

// 响应拦截
HTTP.interceptors.response.use(res => {
    return new Promise((resolve, reject) => {
        if(res.status ===200) {
            // 可以继续细分接口返回res.data.status/res.data.code状态码的判断
            resolve(res.data);
        }else {
            reject(res)
        }
    });
},err => {
    console.log(err);
})

export default HTTP
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

---

三、axios请求的使用

1：在api文件夹下，新建demo文件夹（demo模块），index.js文件

index.js代码：

import request from '@/api/utils/request'

const demo ={
    login(params){
        return request.post('/user?method=login', params)
    }
}
export default demo
1
2
3
4
5
6
7
8

2：utils文件夹下,新建index.js文件：

index.js代码：

import demo from '../demo'
const api ={
    demo
}
export default api
1
2
3
4
5

3：在main.js增加api文件的引入：

import api from "./api/utils"

Vue.prototype.$api =api
1
2
3

4：vue.config.js文件添加devServer，解决请求的跨域问题

devServer: {
    proxy: {
      '^/tg_management': {
        target: 'http://47.106.123.118:8080/tg_management',
        secure: false,
        changeOrigin: true,
        pathRewrite:{
          '^/tg_management':''
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

四、axios请求的验证

let params ={
      username: 123,
      password: 123,
      remember: false,
    }
    this.$api.demo.login(params).then(()=>{})
1
2
3
4
5
6

接口有效，欢迎验证

总结

有些人浅薄，有些人金玉其外而败絮其中。可不经意间，有一天你会遇到一个彩虹般绚丽的人，从此以后，其他人就不过是匆匆浮云。–《怦然心动》