vue封装axios-很实用，很详细_vueaxios封装

axios 是vue 请求接口必须用到的，和ajax一个意思
做项目最好就是封装好，全局使用，比较方便

话不多说，开始

首先vue 项目安装axios

npm install axios
1

然后，新建一个http.js的文件
下面内容直接粘进去，里面有详细介绍

import axios from 'axios'     //引入
import { getToken } from '@/utils/token'//获取token的文件，登录后会返回token，然后用缓存存起来，再去读，后面贴出文件
import { Toast } from 'vant'; 

let baseURL = 'http://192.168.0.1:9090'

//这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
// if(process.env.NODE_ENV=="development"){
//   baseURL=''
// }else{
//   baseURL=''
// }
 
let config = {
  baseURL: baseURL,
  timeout: 30000       //设置最大请求时间
}
const _axios = axios.create(config)
 
/* 请求拦截器（请求之前的操作） */
_axios.interceptors.request.use(
  config => {
      //如果有需要在这里开启请求时的loading动画效果
      config.headers.Authorization = getToken?getToken:"";  //添加token,需要结合自己的实际情况添加，
    return config;
  },
  err => Promise.reject(err)
);
 
/* 请求之后的操作 */
_axios.interceptors.response.use(
  res => {
    //在这里关闭请求时的loading动画效果
    //这里用于处理返回的结果，比如如果是返回401无权限，可能会是跳回到登录页的操作，结合自己的业务逻辑写
    if (res.data.code === 401 ) {
        Toast("无权限操作")
    }
	if (res.data.code === 400 ) {
	    Toast("请求网络失败")
	}
	if (res.data.code === 404 ) {
	   Toast("请求网络失败")
	}
    return res;
  },
  err => {
    if (err) {
      //在这里关闭请求时的loading动画效果
	    Toast("请求网络失败")
    }
    return Promise.reject(err);
  }
);
 
//封装post,get方法,其他的自行往下加，比如put,delete
const http = {
  get(url='',params={}){
    return new Promise((resolve, reject) => {
      _axios({
        url,
        params,
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method: 'GET'
      }).then(res => {
        resolve(res.data)
        return res
      }).catch(error => {
        reject(error)
      })
    })
  },
  post(url='',params={}){
    return new Promise((resolve, reject) => {
      _axios({
        url,
        data:params,
        headers:{'Content-Type': 'application/json;charset=UTF-8'},
        method: 'POST'
      }).then(res => {
        resolve(res.data)
        return res
      }).catch(error => {
        reject(error)
      })
    })
  }
}


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
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

然后，新建一个api.js， 用于存放你的请求方法

//引入刚才的http.js文件
import https from './http.js';
	
	//设置个对象，就不用一个个暴露了，直接暴露对象
	let apiFun = {};
	
	/* 获取列表 */
	//查询列表，详情就是get
	/* /api/getlist是请求接口地址，有http.js里面的Ip加上，如：http:192.168.0.1:9090//api/getlist  */
	apiFun.getlist = function(params) {
		return https.get('/api/getlist', params)
	}
	
	/* 新增保存检查计划 */ 
	//保存都是post
	apiFun.saveJcInfo = function(params) {
		return https.post('/api/saveJcInfo', params)
	}
	
	//暴露出这个对象
	export default apiFun;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

然后在main.js全局引入

import apiFun from "@/api/api.js";
Vue.prototype.$apiFun = apiFun;//请求接口api
1
2

最后，在页面使用

//apiFun就是全局的api方法, 就相当于api.js里面的apiFun，用哪个方法就把后面的名字换掉
//{'itemCode':'SXZA'}是参数，如果参数多，可以在外部定义好，直接把名字传入，如第二个
getlist(){
	this.$apiFun.getlist({'itemCode':'SXZA'}).then((res) => {
			console.log(res)
	})
}


saveJcInfo(){
	let info = {
		'name':'张三',
		'tel':'1938483484',
		'id':'1'
	}
	this.$apiFun.saveJcInfo(info).then((res) => {
			console.log(res)
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

有的新手不明白token是什么，干什么的，这里贴代码
获取token是由登录接口返回，然后自己存起来。一般cookies
token.js

//需要先安装这个js-cookie
//npm install js-cookie --save

import Cookies from 'js-cookie'

const TokenKey = 'account_token'
export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20