axios的简单封装以及使用

| vue , axios

Axios Axios是一个Javascript库，用于从node.js发出HTTP请求或从浏览器发出XMLHttpRequests，它支持JS ES6固有的Promise API。它可以用来拦截HTTP请求和响应，并启用针对XSRF的客户端保护。它还具有取消请求的能力。
我会把axios的封装写在工具类的文件里面以下是初始的axios封装，以后应该会根据情况来改变

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
import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import {getCookie} from '@/utils/cookie'
const CancelToken = axios.CancelToken
var cancel;
var service=axios.create({
    baseURL:process.env.BASE_API,
    timeout:5000
})
 //添加请求拦截器
 service.interceptors.request.use(function(config){
    if(store.getters.token){
        config.headers['TOKEN']=getCookie('TOKEN')
    }
    return config
},function(error){
    return Promise.reject(error)
})
//添加响应拦截器
service.interceptors.response.use(function(response){
   /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过xmlhttprequest来状态码标识 逻辑可写在下面error中
   */
  // response => {
  //   const res = response.data
  //   if (res.code !== 20000) {
  //     })
  //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //       }).then(() => {
  //         })
  //       })
  //     }
  //     return Promise.reject('error')
  //   } else {
  //     return response.data
  //   }
  // },
    return response
},function(error){
    console.log('err'+error)
    Message({
        Message:error.message,
        type:'error',
        duration:5*1000 
    })
    return Promise.reject(error)
}
)
export default{
    //get请求
    get(url,param){
        //promise示例
        //   axios.post('/user', {
        //     firstName: 'Fred',
        //     lastName: 'Flintstone'
        //   })
        //   .then(function (response) {
        //     console.log(response);
        //   })
        //   .catch(function (error) {
        //     console.log(error);
        //   }); 
        return new Promise((resolve,reject)=>{
            service({
                method:'get',
                url,
                params:param,
                cancelToken:new CancelToken(c=>{
                    cancel=c
                })
            }).then(res=>{  //axios返回的是一个promise对象
                resolve(res)  //resolve在promise执行器内部 
            }).catch(err=>{
                console.log(err,'异常')
            })

        })
    },
    //post请求
    post(url,param){
        return new Promise((resolve,reject)=>{
            service({
                method:'post',
                url,
                data:param,
                cancelToken:new CancelToken(c=>{
                    cancel=c
                })
            }).then(res=>{
                resolve(res)
            }).catch(err=>{
                console.log(err,'异常')
            })
        })
    }
}
// export default service

api.js
一般会在项目里把API请求单独出来写，所以在api.js文件里面的请求方式是这样的

1
2
3
4
5
6
7
8
9
import req from '@/utils/axios.js'
// export 的另一种写法
// export const getToken=(username,password)=>{    
// }
const getToken=(username,password)=>{
      return req.post('/login/login',{username,password})    
    //
}
export{getToken}

store
涉及到异步操作时在store的actions里面进行请求

1
2
3
4
5
6
7
8
9
10
11
actions:{
  async gettoken({commit,state},userinfo){
            try{
              var token=await getToken(userinfo.name,userinfo.password)
                  commit('GETUSERINFO',token.data.token) 
                  setCookie('TOKEN',token.data.token)
            }catch(err){
                console.log(err)
            }
        },
}