vue axios的简单封装以及使用


axios的封装

1、为什么要封装axios？

  • 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
  • axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。

2、怎样封装axios？

2.1、首先安装axios,并说明文件的作用

在命令窗口输入指令：cnpm install axios -S (如果有安装淘宝镜像，可以直接使用cnpm,没有的话，用npm)

  • 一般我会在项目的src目录中，新建一个 network 文件夹，然后在里面新建三个 index.js、core.js、config.js。
  • core.js 文件用来封装我们的axios，index.js 文件用来定义的组件内调用的方法，config.js用来导出配置好的axios实例。
2.2、core.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
// 主要的核心代码(对axios方法的封装)

//引入config.js文件中导出的GET和POST方法
import {
    GET,
    POST
} from './config'
//引入axios
import axios from 'axios'
//引入UI组件库
import { Message} from 'element-ui'

//调用axios.create方法，配置一些属性，返回一个新的axios
const instance = axios.create({
    baseURL: "https://api.it120.cc",//发送请求的时候，会在url前面拼接baseURL
    timeout: 10000,//请求超时时间
})

//设置拦截器（拦截器分为请求拦截和响应拦截）

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    Message({
        showClose: true,
        message: error.message,
        type: "error"
    })
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});


//导出request  三个参数分别是：请求方式（get，post）、地址、参数
export function request(method, url, params) {
    //switch遍历
    switch (method) {
        case GET:
            return get(url, params);
        case POST:
            return post(url, params);
    }
}
//get方法的封装
function get(url, params) {
    return instance.get(url, params)
}
//post方法的封装
function post(url, params) {
    return instance.post(url, params)
}
6.3、config.js
1
2
3
4
5
6
7
// 导出GET和POST，以及路径的方法
export const GET = "get";
export const POST = "post";

export const path = {
    list:"/small4/banner/list"
}
6.4、index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//把core.js文件的request，引入index.js文件
import {
    request
} from "./core";
//把config.js里面的方法引入
import {
    GET,
    POST,
    path
} from './config'
//使用request()方法，来传参数：请求方式，地址，参数（在这里没有写第三个参数），然后把它使用const作为模块抛出
const network = {
    getBanner() {
        return request(GET, path.list)
    }
}

export default network;

3、axios封装的使用

3.1、在main.js文件引用
1
2
3
4
//在mian.js，引入network文件夹的index.js文件
import network from './network/index'
//在Vue中注册network
Vue.prototype.$network = network;

3.2、在组件中使用
1
2
3
4
5
6
7
8
//在mounted()的钩子函数里使用
 mounted() {
    this.$network.getBanner().then((res)=>{
        console.log(res)
    }).catch((err)=>{
        console.log(err)
    })
  }