在Vue中使用axios + 封装一次axios

发表于 | 更新于 | 分类于 | 阅读次数：

一. 什么是axios

  1. Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
  2. 官方文档

二. 如何安装到项目中

1
npm install axios

三. 如何在项目中使用

  1. 如何发送GET请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    axios.get('http://jsonplaceholder.typicode.com/posts',{
        params:{ id:1 }     // ?拼接的方式传参
    })
    .then((res)=>{ // 请求成后的回调
        console.log(res);
    })
    .catch((error)=>{// 任何错误的出口
        console.log(error);
    })

  2. 如何发送POST请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    axios.post('https://jsonplaceholder.typicode.com/posts',{
        id:1    // // post传参
    })
    .then((res)=>{ // 请求成后的回调
        console.log(res);
    })
    .catch((error)=>{// 任何错误的出口
        console.log(error);
    })

  3. 使用对象的方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    axios({
        method: 'post',             // 请求方式
        url: '/user/12345',         // 请求地址
        data: {                     // 请求参数
            firstName: 'Fred',
            lastName: 'Flintstone'
        },
        headers:{},                  // 设置自定义请求头
        timeout:5,                 // 请求中断时间 超过5秒 自动请求失败
        ···// 更多查看官方文档
    });

无论是哪一种方式传参返回 回来的都是响应的主体。它们中我们仅需要的就是data 如何让返回结果只包含data，请求携带token呢？
响应

四. axios拦截器的使用

  1. 什么是拦截器:
    • 请求拦截器在请求发送之前我们需要做的一些事，它们需要我们反复的添加并且一样。比如添加token验证，参数序列化，修改请求头，等操作
    • 响应拦截器在响应回来我们需要做的一些事，它们需要我们反复的添加，修改并且一样。比如简化请求返回体，一致的状态码返回处理，等

  2. 全局请求拦截器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    axios.interceptors.request.use( 
        (config) => {// 在发送请求之前做些什么
            // 我们可以在这里添加网站的token验证
            // if (getToken()) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            //     config.headers.Authorization = `${getToken()}`;
            // }
            return config;
        }, 
        (error) => {// 对请求错误做些什么
            return Promise.reject(error);
        }
    );

  3. 全局响应拦截器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    axios.interceptors.response.use(
        (response) => { // 对响应数据做点什么
            // 在这里我们可以将请求体简化
            let data = response.data;
            if(data.status === 4009){
                // console.log('登录失效了')
                // location.href = 'login.html'// 直接跳转登录页
            }
            return data;            // 最后将数据返回出去
        }, 
        (error) => {// 对响应错误做点什么
        return Promise.reject(error);
      });

了解完以上内容我们就可以自己封装一个axios请求的方法了，不过我们可以在了解下其他的，这样会更加的有利于我们封装

五. 全局参数设置

  1. 全局默认请求地址前缀。
  2. 全局默认请求token
    • axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
  3. 全局post默认请求头
    • axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
  4. 全局参数默认序列化(坑)

不过我们不用这个。我们有更好的东西

1
2
3
4
5
6
7
axios.defaults.transformRequest = [function (data) {
   let ret = ''
   for (let it in data) {
     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
   }
   return ret
 }],

六. 在Vue中封装一个axios

通过上面的只是储备，我们闲话不多说，开始封装

  1. 安装axios
    • npm i axios
    • npm i qs // 使用qs 代替axios中的参数序列化方法

在发送post请求,不将参数序列化，当你请求的时候会一直报错(400，传参错误)。原因就是你参数后台识别不了

  1. 在src目录下创建 api文件夹

  2. 在api文件夹下创建ajax.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
    // src/api/ajax.js
    import axios from 'axios'
    import qs from 'qs' 
    // 设置全局axios 配置
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    axios.defaults.baseURL = 'http://wwww.xxx.com';// 请求都是 http://wwww.xxx.com 开头 + url

    // 设置请求拦截器
    axios.interceptors.request.use( 
        (config) => {// 在发送请求之前做些什么
            // if (getToken()) { config.headers.Authorization = `${getToken()}`; }
            return config;
        }, 
        (error) => {// 对请求错误做些什么
            return Promise.reject(error);
    });
    axios.interceptors.response.use(
        (response) => { // 对响应数据做点什么
            let data = response.data;
            if(data.status === 4009){
                // console.log('登录失效了')
            }
            return data;            // 最后将数据返回出去
        }, 
        (error) => {// 对响应错误做点什么
        return Promise.reject(error);
    });


    //重新定义post请求
    export const post = (url, params) => {
        return axios({
            method: 'post',
            url: `${url}`,
            data: qs.stringify(params),
        });
    };
    //重新定义get请求
    export const get = (url,params) => {
        return axios({
            method: 'get',
            url: `${url}`,
            params
        });
    };

  3. 如何全局使用
    在main.js 将其挂载到Vue上

    1
    2
    3
    import { post, get } from './api/ajax'
    Vue.prototype.$post = post
    Vue.prototype.$get = get

  4. 模块化请求url
    在api目录下 新增项目对应的模块js文件(便于维护)

    1
    2
    3
    // src/api/url
    export const login = '/front/customer/login'        // 用户登录 ?phone=''&password=''
    export const shopping = '/front/goods/goodsGroup'   // 获取商品

  5. 如何使用
    我们将方法挂载到Vue上后就可以使用this.$post/this.$get 来获取了

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
<!-- 页面 -->
<template>
    <div>
        <p>我是axios测试页面</p>
        <button @click="handleLogin">登录</button> 
    </div>
</template>

<script>
import {shopping} from '@/api/url'
export default {
mounted () {
    this.$post(shopping)
      .then(res => {
        console.log(res)
      })
      .catch(error => {
        console.log(error)
      })
},
methods: {
    handleLogin () {
      this.$post(login, {phone: 15555555555, password: 123456})
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    }
}
</script>

七. 恭喜你Get到一个新技能